plain-design 1.0.0-beta.104 → 1.0.0-beta.106

package/src/packages/components/Form/types/any.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 

package/src/packages/components/Form/types/array.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/types/date.tsx

@@ -1,5 +1,5 @@
 import {iValidation} from "../validate/createValidation";
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {plainDate} from "../../../utils/plainDate";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/types/number.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import i18n from "../../i18n";
 

package/src/packages/components/Form/types/string.tsx

@@ -1,4 +1,4 @@
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import {iValidation} from "../validate/createValidation";
 import {iRegistrationValidator} from "../validate/validate.utils";
 import i18n from "../../i18n";

package/src/packages/components/Form/validate/createValidation.tsx

@@ -1,6 +1,6 @@
-import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "@peryl/react-compose";
 import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {registryAnyValidationType} from "../types/any";
 import {registryStringValidationType} from "../types/string";
 import {registryNumberValidationType} from "../types/number";

package/src/packages/components/Form/validate/useFormItemValidation.tsx

@@ -1,8 +1,8 @@
 import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
-import {computed, inject, onBeforeUnmount, watch, watchEffect} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, watch, watchEffect} from "@peryl/react-compose";
 import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
 import {Validation} from "./createValidation";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 
 /**
  * 抽离FormItem中的校验逻辑

package/src/packages/components/Form/validate/useFormValidation.tsx

@@ -1,5 +1,5 @@
 import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iFormValidatePropsType, iValidateState} from "./validate.utils";
-import {provide, reactive} from "plain-design-composition";
+import {provide, reactive} from "@peryl/react-compose";
 import {$message} from "../../$message";
 import {Validation} from "./createValidation";
 import {AutoLoadingObserver} from "../../AutoLoadingObserver";

package/src/packages/components/Form/validate/validate.utils.tsx

@@ -1,7 +1,7 @@
-import {PlainObject} from "plain-utils/utils/event";
-import {computed, ExtractPropTypes, PropType} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {toArray} from "plain-utils/utils/toArray";
+import {PlainObject} from "@peryl/utils/event";
+import {computed, ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {toArray} from "@peryl/utils/toArray";
 
 /**
  * 表单的校验模式

package/src/packages/components/FormItem/FormItemValidateMessage.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import Icon from "../Icon";
 
 export const FormItemValidateMessage = designComponent({

package/src/packages/components/FormItem/createFormEditor.tsx

@@ -1,6 +1,6 @@
-import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "plain-design-composition";
+import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "@peryl/react-compose";
 import {FormItemValidateExposePropsOption} from "../Form/validate/validate.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {FormItem} from "./index";
 import React from "react";
 

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

@@ -1,4 +1,4 @@
-import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";

package/src/packages/components/Grid/GridCol.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {GridColSize} from "./grid.utils";
 import GridRow from "./GridRow";
 

package/src/packages/components/Grid/GridRow.tsx

@@ -1,7 +1,7 @@
-import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {eGridAlign, eGridJustify} from "./grid.utils";
-import {unit} from 'plain-utils/string/unit';
-import {removeUnit} from 'plain-utils/string/removeUnit';
+import {unit} from '@peryl/utils/unit';
+import {removeUnit} from '@peryl/utils/removeUnit';
 import './grid.scss';
 import {ThemeSize, useStyle} from "../../uses/useStyle";
 import {ApplicationConfigurationProvider} from "../ApplicationConfigurationProvider";

package/src/packages/components/Icon/icon.registry.tsx

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {RenderNode} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 
 interface iIconGetter {(data: { props: { icon?: string | undefined, strokeWidth: number | undefined, strokeLinecap: tStrokeLinecap | undefined, strokeLinejoin: tStrokeLinejoin | undefined }, attrs: any }): RenderNode | Promise<RenderNode>;}
 

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

@@ -1,6 +1,6 @@
-import {PlainIcon} from 'plain-icons/src/packages/component/icon/react';
-import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "plain-design-composition";
-import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import {PlainIcon} from '@peryl/icon/src/packages/component/icon/react';
+import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
 import './icon.scss';
 import {IconRegistration} from "./icon.registry";
 import {renderNothing} from "../../utils/renderNothing";

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

@@ -1,4 +1,4 @@
-import {designComponent, RenderNode} from 'plain-design-composition';
+import {designComponent, RenderNode} from '@peryl/react-compose';
 
 export const Illustration = designComponent({
   name: 'illustration',

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

@@ -1,7 +1,7 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from 'plain-design-composition';
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useRefs, useStyles, watch} from '@peryl/react-compose';
 import './image.scss';
-import {unit} from "plain-utils/string/unit";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {unit} from "@peryl/utils/unit";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
 import {$image} from "../$image";
 import {LoadingMask} from "../LoadingMask";

package/src/packages/components/ImagePreviewer/ImagePreviewer.tsx

@@ -1,16 +1,16 @@
-import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles, watch} from "plain-design-composition";
+import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "./image-previewer.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {getRectAutoFormat} from "plain-utils/dom/getRectAutoFormat";
-import {addElementListener} from "plain-utils/dom/addElementListener";
-import {delay} from "plain-utils/utils/delay";
+import {createEffects} from "@peryl/utils/createEffects";
+import {getRectAutoFormat} from "@peryl/utils/getRectAutoFormat";
+import {addElementListener} from "@peryl/utils/addElementListener";
+import {delay} from "@peryl/utils/delay";
 import Carousel from "../Carousel";
 import CarouselItem from "../CarouselItem";
 import {ImagePreviewerGallery} from "./ImagePreviewerGallery";
 import {ImagePreviewerCarouselImage} from "./ImagePreviewerCarouselImage";
 import './image-previewer.scss';
 import {ImagePreviewerButtonBar} from "./ImagePreviewerButtonBar";
-import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
 import $previewer from "../$previewer";
 import {buildCycleIndexList} from "../../utils/buildCycleIndexList";
 import {getDeviceInfo} from "../../utils/getDeviceInfo";

package/src/packages/components/ImagePreviewer/ImagePreviewerButtonBar.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iMouseEvent, PropType, useClasses} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
 import Tooltip from "../Tooltip";
 import {iImagePreviewerOption} from "./image-previewer.utils";
 

package/src/packages/components/ImagePreviewer/ImagePreviewerCarouselImage.tsx

@@ -1,5 +1,5 @@
-import {designComponent, iHTMLImageElement, iMouseEvent, PropType, reactive, useRefs, useStyles} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {designComponent, iHTMLImageElement, iMouseEvent, PropType, reactive, useRefs, useStyles} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 
 /**
  * img自动判断自己是应该宽度沾满还是高度沾满

package/src/packages/components/ImagePreviewer/ImagePreviewerGallery.tsx

@@ -1,6 +1,6 @@
-import {computed, designComponent, iHTMLDivElement, iMouseEvent, onBeforeUnmount, PropType, reactive, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
-import {notNull} from "plain-utils/utils/notNull";
-import {delay} from "plain-utils/utils/delay";
+import {computed, designComponent, iHTMLDivElement, iMouseEvent, onBeforeUnmount, PropType, reactive, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
+import {notNull} from "@peryl/utils/notNull";
+import {delay} from "@peryl/utils/delay";
 import {Icon} from "../Icon";
 import {iImagePreviewerOption} from "./image-previewer.utils";
 import {PreviewerLoading} from "./PreviewerLoading";

package/src/packages/components/ImagePreviewer/PreviewerLoading.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import './previewer-loading.scss';
 
 export const PreviewerLoading = designComponent({

package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx

@@ -1,7 +1,7 @@
 import {PartialFields} from "../../utils/type";
-import {createHooks} from "plain-design-composition";
-import {createCounter} from 'plain-utils/utils/createCounter';
-import {notNull} from "plain-utils/utils/notNull";
+import {createHooks} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
+import {notNull} from "@peryl/utils/notNull";
 
 export const ImagePreviewerConstants = {
   /*画廊高度，默认70px*/

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

@@ -1,12 +1,12 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {defer} from "plain-utils/utils/defer";
+import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {defer} from "@peryl/utils/defer";
 import {Image, ImagePropsOptions} from "../Image";
 import {$image} from "../$image";
 import {Icon} from "../Icon";
-import {PlainObject} from "plain-utils/utils/event";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {PlainObject} from "@peryl/utils/event";
+import {createEnum} from "@peryl/utils/createEnum";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {$file, FileServiceDefaultAccept, FileServiceUploadConfig} from "../$file";
 import $configuration from "../$configuration";

package/src/packages/components/Input/index.scss

@@ -197,8 +197,10 @@
       width: $height;
       color: plv(text-2);
     }
-    .input-suffix-icon-wrapper {
+    .input-suffix-icon-wrapper, .input-icon-button {
       color: plv(text-2);
+    }
+    .input-suffix-icon-wrapper {
       width: plv(input-clear-size-#{$name})
     }
 
@@ -245,7 +247,7 @@
       box-shadow: 0 0 0 2px $color-2;
       z-index: 2;
     }
-    .input-suffix-icon-wrapper {
+    .input-suffix-icon-wrapper, .input-icon-button {
       color: $color-6;
     }
   }

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

@@ -1,8 +1,8 @@
-import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, onMounted, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, onMounted, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {Icon} from "../Icon";
 import {useInputEnterHandler} from "./uses/useInputEnterHandler";
 import {useInputHooks} from "./uses/useInputHooks";
@@ -17,7 +17,7 @@ import {useFocusHandler} from "../../uses/useFocusHandler";
 import {useSuggestionInput} from "./useSuggestionInput";
 import {useMultipleModel} from "../../uses/useMultipleModel";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const Input = designComponent({
   name: '-input',

package/src/packages/components/Input/input.utils.ts

@@ -1,5 +1,5 @@
 import {tInputHooks} from "./uses/useInputHooks";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, PropType, SimpleFunction, tRefs, tSlotsType} from "@peryl/react-compose";
 import {createError} from "../../utils/createError";
 import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {EditProps, tEditComputed} from "../../uses/useEdit";

package/src/packages/components/Input/useMultipleInput.tsx

@@ -1,11 +1,11 @@
 import {AutoWidthInput} from "../AutoWidthInput";
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
 import Icon from "../Icon";
-import {iHTMLElement, useClasses, useModel, useRefs} from "plain-design-composition";
-import {getKey, KEY} from "../KeyboardService";
-import {delay} from "plain-utils/utils/delay";
+import {iHTMLElement, useClasses, useModel, useRefs} from "@peryl/react-compose";
+import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
+import {delay} from "@peryl/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
 
 /**
@@ -59,11 +59,11 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
       hooks.onInput.exec(val);
     },
     onKeydown: async (e: KeyboardEvent) => {
-      switch (getKey(e)) {
-        case KEY.enter:
+      switch (getKeyNameByKeyboardEvent(e)) {
+        case eKeyboardKeys.enter:
           await handler.onAddTag();
           return;
-        case KEY.backspace:
+        case eKeyboardKeys.backspace:
           !(e as any).target.value && model.value && handler.onRemoveTag((model.value as any[]).length - 1);
           return;
       }

package/src/packages/components/Input/useSingleInput.tsx

@@ -1,7 +1,7 @@
 import {iInputCompositionData} from "./input.utils";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {iKeyboardEvent} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {FixInput} from "../../utils/FixInput";
 
 export const useSingleInput = createEffectiveHandler(({ props, hooks, model, editComputed, styleComputed }: iInputCompositionData) => {

package/src/packages/components/Input/useSuggestionInput.tsx

@@ -1,13 +1,13 @@
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
-import {computed, reactive, useRefs} from "plain-design-composition";
+import {computed, iKeyboardEvent, reactive, useRefs} from "@peryl/react-compose";
 import {SelectPanel} from "../Select/SelectPanel";
 import {SelectOption} from "../SelectOption";
 import {Scroll} from "../Scroll";
 import {createSelectHover, iSelectOptionProps} from "../Select/select.utils";
 import {decodeSelectRenderNode} from '../Select/decodeSelectRenderNode';
-import {delay} from 'plain-utils/utils/delay';
-import {handleKeyboard} from "../KeyboardService";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {delay} from '@peryl/utils/delay';
+import {handleKeyboard} from "@peryl/utils/keyboard";
+import {createEffects} from "@peryl/utils/createEffects";
 import {createPopupEditor} from "../usePopupEditor";
 
 export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
@@ -72,7 +72,7 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
 
     },
     onMousedownPanel: () => {delay().then(() => refs.input?.focus());},
-    onInputKeydown: handleKeyboard({
+    onInputKeydown: handleKeyboard<iKeyboardEvent | KeyboardEvent>({
       up: (e) => {
         e.preventDefault();
         if (!state.isShow) {return;}

package/src/packages/components/Input/useTextareaInput.tsx

@@ -1,7 +1,7 @@
 import {iInputCompositionData} from "./input.utils";
-import {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {createEffects} from "@peryl/utils/createEffects";
 import {ClientZoom} from "../ClientZoom";
 
 const _Textarea = fixInputCursor('textarea');

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -1,8 +1,8 @@
-import {reactive, watch} from "plain-design-composition";
-import {doNothing} from "plain-utils/utils/doNothing";
-import {throttle} from "plain-utils/utils/throttle";
+import {reactive, watch} from "@peryl/react-compose";
+import {doNothing} from "@peryl/utils/doNothing";
+import {throttle} from "@peryl/utils/throttle";
 import {iInputCompositionData} from "../input.utils";
-import {getKey, KEY} from "../../KeyboardService";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 
 /**
  * 自动监听input ref动作
@@ -54,10 +54,10 @@ export function useInputEnterHandler(
     input: null as null | HTMLInputElement,
     onKeydown: (e: KeyboardEvent) => {
       emit.onKeydown(e);
-      switch (getKey(e)) {
-        case KEY.enter:
+      switch (getKeyNameByKeyboardEvent(e)) {
+        case eKeyboardKeys.enter:
           return enterHandler.value(e);
-        case KEY.esc:
+        case eKeyboardKeys.esc:
           return emit.onEsc(e);
       }
     },

package/src/packages/components/Input/uses/useInputHooks.tsx

@@ -1,4 +1,4 @@
-import {createHooks, createSyncHooks, iKeyboardEvent, RenderNode} from 'plain-design-composition';
+import {createHooks, createSyncHooks, iKeyboardEvent, RenderNode} from '@peryl/react-compose';
 import {iSelectOptionProps} from "../../Select/select.utils";
 
 export function useInputHooks() {

package/src/packages/components/Input/uses/useInputMaxLength.tsx

@@ -1,5 +1,5 @@
 import {iInputCompositionData, showInputError} from "../input.utils";
-import {computed, watch} from "plain-design-composition";
+import {computed, watch} from "@peryl/react-compose";
 
 /**
  * 渲染最大文本长度提示suffix

package/src/packages/components/Input/uses/useInputSuffixIcon.tsx

@@ -1,8 +1,8 @@
 import {iInputCompositionData} from "../input.utils";
-import {computed, iMouseEvent} from "plain-design-composition";
+import {computed, iMouseEvent} from "@peryl/react-compose";
 import Icon from "../../Icon";
 import Loading from "../../Loading";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export function useInputSuffixIcon({ slots, hooks, props, editComputed, model, emit, methods, isEmpty, styleComputed }: iInputCompositionData) {
 

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, useClasses} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import './input-group.scss';

package/src/packages/components/InputNumber/NumberResize.tsx

@@ -1,9 +1,9 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "@peryl/react-compose";
 import {Icon} from "../Icon";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {addClass} from "plain-utils/dom/addClass";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addClass} from "@peryl/utils/addClass";
 import {ClientZoom} from "../ClientZoom";
-import {roundFixed} from "plain-utils/utils/roundFixed";
+import {roundFixed} from "@peryl/utils/roundFixed";
 
 export const NumberResize = designComponent({
   name: "number-resize",

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import './number.scss';
 import {Input} from "../Input";
 import {useInputNumberPublic} from "./useInputNumber.public";

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

@@ -1,6 +1,6 @@
 import {StyleProps} from "../../uses/useStyle";
 import {EditProps} from "../../uses/useEdit";
-import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, createHooks, createRenderHook, createSyncHooks, ExtractPropTypes, iMouseEvent, PropType, tSlotsType} from "@peryl/react-compose";
 import {NumberButtonTypes} from "./number.utils";
 import {InputPropsOption} from "../Input/input.utils";
 

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

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

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

@@ -1,7 +1,7 @@
 import {iInputNumberPublic} from "./useInputNumber.public";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 
 export function useInputNumberMultiple(
   { props, hooks, event, utils, effectiveInputValue }: iInputNumberPublic

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

@@ -1,15 +1,15 @@
 import {iInputNumberCompositionParam, iInputNumberEffectiveValueInfo, iInputNumberValueInfo} from "./input-number.utils";
-import {computed, getComponentCls, iHTMLElement, iMouseEvent, reactive, RenderNode, useClasses, useNumber, useRefs} from "plain-design-composition";
+import {computed, getComponentCls, iHTMLElement, iMouseEvent, reactive, RenderNode, useClasses, useNumber, useRefs} from "@peryl/react-compose";
 import {useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
-import {roundFixed} from "plain-utils/utils/roundFixed";
-import {getKey, KEY} from "../KeyboardService";
+import {roundFixed} from "@peryl/utils/roundFixed";
+import {eKeyboardKeys, getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import {useClickWave} from "../../directives/ClickWave";
 import {NumberResize} from "./NumberResize";
 import {NumberButtonTypes} from "./number.utils";
 import {Input} from "../Input";
 import Icon from "../Icon";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 const NAN = 'NAN';
 const numberPattern = /([\d.-]+)([a-zA-Z%]*)/;
@@ -257,14 +257,14 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
      * @date    2023/2/10 14:55
      */
     onKeydown: (e: KeyboardEvent) => {
-      const key = getKey(e);
+      const key = getKeyNameByKeyboardEvent(e);
       switch (key) {
-        case KEY.up:
+        case eKeyboardKeys.up:
           e.preventDefault();
           e.stopPropagation();
           methods.add();
           break;
-        case KEY.down:
+        case eKeyboardKeys.down:
           e.preventDefault();
           e.stopPropagation();
           methods.minus();
@@ -298,7 +298,7 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
     button: {
       prefix: () => (
         <span
-          className="number-prepend-button plain-click-node"
+          className="number-prepend-button plain-click-node input-icon-button"
           onMouseDown={handler.intervalMinus}
           onClick={stopClickPropagation}
           ref={onRef.sub}>
@@ -307,7 +307,7 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
       ),
       suffix: () => (
         <span
-          className="number-append-button plain-click-node"
+          className="number-append-button plain-click-node input-icon-button"
           onMouseDown={handler.intervalAdd}
           onClick={stopClickPropagation}
           ref={onRef.add}>
@@ -324,14 +324,14 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
       suffix: () => (
         <span className="number-button-container">
             <span
-              className="number-append-button plain-click-node"
+              className="number-append-button plain-click-node input-icon-button"
               onMouseDown={handler.intervalAdd}
               onClick={stopClickPropagation}
               ref={onRef.add}>
               <Icon icon={props.addIcon || 'pi-up'}/>
             </span>
             <span
-              className="number-prepend-button plain-click-node"
+              className="number-prepend-button plain-click-node input-icon-button"
               onMouseDown={handler.intervalMinus}
               onClick={stopClickPropagation}
               ref={onRef.sub}>
@@ -348,6 +348,7 @@ export function useInputNumberPublic(param: iInputNumberCompositionParam) {
     resize: {
       suffix: () => (
         <NumberResize
+          className="input-icon-button"
           value={effectiveInputValue.value?.val || 0}
           step={numberState.step}
           precision={numberState.precision}

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

@@ -1,6 +1,6 @@
 import {iInputNumberPublic} from "./useInputNumber.public";
-import {reactive, useModel} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {reactive, useModel} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export function useInputNumberSingle(
   { hooks, props, event, utils }: iInputNumberPublic

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import './layout.scss';
 
 export const Layout = designComponent({

package/src/packages/components/Layout/layout.utils.ts

@@ -1,3 +1,3 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const eLayoutSectionPosition = createEnum(['top', 'left', 'right', 'bottom', 'center'] as const);