plain-design 1.0.0-beta.98 → 3.0.0

package/src/packages/components/Image/image.scss

@@ -261,8 +261,9 @@
 
 /*---------------------------------------image-------------------------------------------*/
 
-img.#{componentName(image)} {
+.#{componentName(image)} {
   vertical-align: bottom;
+  box-sizing: border-box;
 }
 
 img.image-preview-on-click {
@@ -277,7 +278,7 @@ div.#{componentName(image)} {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4px;
+  padding: 1em;
 
   @include prefix(icon) {
     font-size: 36px;
@@ -287,9 +288,13 @@ div.#{componentName(image)} {
   span {
     color: plv(text-2);
     font-size: 12px;
+    transform: scale(0.8);
+    transform-origin: center;
+    white-space: nowrap;
   }
 
   &.image-status-pending {
+    padding: 0;
     @include prefix(loading) {
       margin-bottom: 0;
     }
@@ -330,4 +335,8 @@ div.#{componentName(image)} {
       color: plv(primary-6);
     }
   }
+
+  &.image-status-empty, &.image-status-error {
+    aspect-ratio: 1;
+  }
 }

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

@@ -1,11 +1,12 @@
-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";
 import i18n from "../i18n";
+import {$previewer} from "../$previewer";
+import Skeleton from "../Skeleton";
 
 /**
  * 图片填充类型
@@ -30,6 +31,14 @@ export const ImagePropsOptions = {
   alt: { type: String },                                                        // 图片描述
   fit: { type: String as PropType<typeof eImageFit.TYPE>, default: eImageFit.cover },// 图片 object-fit 属性
   position: { type: String, default: 'top center' },                            // 图片 object-position 属性
+  maxHeight: { type: [String, Number] },                                        // 最大高度
+  minHeight: { type: [String, Number] },                                        // 最小高度
+  maxWidth: { type: [String, Number] },                                         // 最大宽度
+  minWidth: { type: [String, Number] },                                         // 最小宽度
+  width: { type: [String, Number] },                                            // 图片宽度
+  height: { type: [String, Number] },                                           // 图片高度
+  hideTips: { type: Boolean },                                                  // 隐藏提示文本
+  urlPrefix: { type: String },                                                  // 图片地址前缀
 };
 
 /**
@@ -56,16 +65,9 @@ export const Image = designComponent({
     formatImagePath,
   },
   props: {
-    src: { type: String as PropType<string | null> },                          // 图片地址
-    status: { type: String as PropType<typeof eImageStatus.TYPE> },      // 当前转股固态，fill, container, cover, none, scale-down
-    previewOnClick: { type: Boolean, default: true },                          // 是否点击的时候放大预览图片
-    maxHeight: { type: [String, Number] },                                     // 最大高度
-    minHeight: { type: [String, Number] },                                     // 最小高度
-    maxWidth: { type: [String, Number] },                                      // 最大宽度
-    minWidth: { type: [String, Number] },                                      // 最小宽度
-    width: { type: [String, Number] },                                         // 图片宽度
-    height: { type: [String, Number] },                                        // 图片高度
-    urlPrefix: { type: String },                                               // 图片地址前缀
+    src: { type: String as PropType<string | null> },                           // 图片地址
+    status: { type: String as PropType<typeof eImageStatus.TYPE> },             // 当前状态
+    previewOnClick: { type: Boolean, default: true },                           // 是否点击的时候放大预览图片
     ...ImagePropsOptions,
   },
   emits: {
@@ -99,6 +101,7 @@ export const Image = designComponent({
         emit.onSuccess(state.src!);
       };
       image.onerror = (e) => {
+        console.error(`load image error: ${image.src}`, e, props.urlPrefix);
         state.status = eImageStatus.error;
         emit.onError(e);
       };
@@ -133,7 +136,7 @@ export const Image = designComponent({
     const handler = {
       onClick: (e: iMouseEvent) => {
         if (state.status === eImageStatus.success && props.previewOnClick) {
-          $image.preview(state.src!);
+          $previewer.preview(state.src!, e.currentTarget as any);
         }
         emit.onClick(e);
       }
@@ -144,12 +147,18 @@ export const Image = designComponent({
         refs,
       },
       render: () => {
-        if (status.value === eImageStatus.empty || status.value === eImageStatus.pending || status.value === eImageStatus.error) {
+        if (status.value === eImageStatus.empty || status.value === eImageStatus.error) {
           return (
             <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
               <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
-              <span>{tip[status.value]}</span>
-              {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
+              {!props.hideTips && <span>{tip[status.value]}</span>}
+            </div>
+          );
+        }
+        if (status.value === eImageStatus.pending) {
+          return (
+            <div className={classes.value} style={styles.value} ref={onRef.el}>
+              <Skeleton full square={props.height == null}/>
             </div>
           );
         }

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 {anonymousEffects, createHooks} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
+import {notNull} from "@peryl/utils/notNull";
 
 export const ImagePreviewerConstants = {
   /*画廊高度，默认70px*/
@@ -43,7 +43,7 @@ export type iImagePreviewerParamOption = string | string[] | iImagePreviewerOpti
 
 export const ImagePreviewerHooks = {
   /*PreviewerComponent挂载完毕事件*/
-  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>()
+  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>(anonymousEffects)
 };
 
 const nextOptionId = createCounter('image_previewer');

package/src/packages/components/ImageSelector/image-selector.scss

@@ -0,0 +1,70 @@
+@include comp(image-selector) {
+  $num: 3;
+  $gutter: 1em;
+
+  .image-select-option {
+    display: inline-flex;
+    margin-right: $gutter;
+    margin-bottom: $gutter;
+    border: solid 2px plv(border-color);
+    padding: 10px;
+    box-sizing: border-box;
+    position: relative;
+
+    width: calc((100% - (#{$gutter} * (#{$num} - 1))) / #{$num});
+    aspect-ratio: var(--aspect-ratio);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all ease 300ms;
+
+    .image-select-option-checked {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      height: 36px;
+      width: 36px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      color: white;
+      opacity: 0;
+      transition: all ease 300ms;
+
+      &:before {
+        position: absolute;
+        inset: 0;
+        content: '';
+        background-color: plv(primary-6);
+        transform: translateX(50%) translateY(50%) rotate(45deg);
+        transform-origin: center;
+        z-index: 1;
+      }
+
+      & > .#{componentName(icon)} {
+        z-index: 2;
+        transform: rotate(-4.5deg);
+      }
+    }
+
+    & > img {
+      width: 100%;
+      aspect-ratio: inherit;
+    }
+
+    &:nth-child(#{$num}n) {
+      margin-right: 0;
+    }
+
+    &:hover {
+      border-color: plv(primary-3);
+    }
+
+    &[data-selected=true] {
+      border-color: plv(primary-6);
+
+      .image-select-option-checked {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import {designComponent, getComponentCls, iMouseEvent, PropType, useModel} from "@peryl/react-compose";
+import {Scroll} from "../Scroll";
+import {Box} from "../Box";
+import {Icon} from "../Icon";
+import {Image} from "../Image";
+import './image-selector.scss';
+
+export const ImageSelector = designComponent({
+  name: 'image-selector',
+  props: {
+    modelValue: { type: [String, Number] },
+    selectOptions: { type: Array as PropType<iImageSelectOption[]> },
+    aspectRatio: { type: String, default: '3 / 4' },
+    imageFit: { type: String, default: 'contain' },
+    imagePosition: { type: String, default: 'center left' },
+  },
+  emits: {
+    onUpdateModelValue: (val?: string | number | null | undefined) => true,
+    onDoubleClickOption: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    return () => (
+      <div className={getComponentCls('image-selector')} style={{ '--aspect-ratio': props.aspectRatio } as any}>
+        <Scroll>
+          {props.selectOptions?.map(item => (
+            <Box
+              className="image-select-option"
+              key={item.val}
+              data-selected={String(model.value === item.val)}
+              onClick={() => {model.value = item.val;}}
+              onDoubleClick={emit.onDoubleClickOption}
+            >
+              <Image
+                width="100%"
+                src={item.url}
+                previewOnClick={false}
+                fit={props.imageFit as any}
+                position={props.imagePosition}
+              />
+              <div className="image-select-option-checked">
+                <Icon icon="pi-check"/>
+              </div>
+            </Box>
+          ))}
+        </Scroll>
+      </div>
+    );
+  },
+});
+
+export default ImageSelector;
+
+export interface iImageSelectOption {
+  val: string,
+  url: string
+}

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

@@ -1,17 +1,18 @@
-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, iMouseEvent, 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";
 import {iUploadService} from "../$upload/createUploadService";
 import i18n from "../i18n";
+import {iUploadServiceConfig} from "../$upload/upload.utils";
+import {$previewer} from "../$previewer";
 
 /**
  * ImageUploader的状态
@@ -40,17 +41,21 @@ export const ImageUploader = designComponent({
     handleDelete: { type: Function as PropType<() => void | Promise<void>> },                 // 自定义删除图片逻辑
     handleUpload: { type: Function as PropType<(file: File) => void | Promise<void>> },       // 自定义上传图片逻辑
     handlePreview: { type: Function as PropType<(url?: string) => void> },                    // 自定义预览逻辑
-    urlPrefix: { type: String },
-    service: { type: Object as PropType<iUploadService> },
+    urlPrefix: { type: String },                                                              // 图片路径前缀
+    service: { type: Object as PropType<iUploadService> },                                    // 文件上传服务
+    emitBase64: { type: Boolean },                                                            // 当选择文件之后，是否将 base64 值更新到绑定值
+    getFilePathFromResponse: { type: Function as PropType<iUploadServiceConfig['getFilePathFromResponse']> },// 从上传结果中获取图片访问地址
   },
   inheritPropsType: HTMLDivElement,
   emits: {
     onUpdateModelValue: (val?: string) => true,
     onLoadSuccess: (url: string) => true,
     onLoadError: (e: string | Event) => true,
+    onLoadComplete: () => true,
     onUploadSuccess: (resp: PlainObject | string) => true,
     onUploadProgress: (percent: number, e: ProgressEvent) => true,
     onUploadFail: (e: any) => true,
+    onUploadComplete: () => true,
   },
   setup({ props, event: { emit } }) {
 
@@ -59,7 +64,8 @@ export const ImageUploader = designComponent({
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
     const { refs, onRef } = useRefs({ el: HTMLDivElement });
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { autoWatch: false });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
 
     const { editComputed } = useEdit();
 
@@ -70,7 +76,6 @@ export const ImageUploader = designComponent({
     });
 
     watch(() => props.modelValue, val => {
-      model.value = Image.formatImagePath(val, urlPrefix.value);
       state.chooseBase64 = undefined;
       if (!model.value) {
         return state.status = eImageUploaderStatus.empty;
@@ -80,12 +85,14 @@ export const ImageUploader = designComponent({
       image.onload = () => {
         state.status = eImageUploaderStatus.success;
         emit.onLoadSuccess(model.value!);
+        emit.onLoadComplete();
       };
       image.onerror = (e) => {
         state.status = eImageUploaderStatus.error;
         emit.onLoadError(e);
+        emit.onLoadComplete();
       };
-      image.src = model.value;
+      image.src = Image.formatImagePath(val, urlPrefix.value);
     }, { immediate: true });
 
     const classes = useClasses(() => [
@@ -125,10 +132,16 @@ export const ImageUploader = designComponent({
             onSuccess: (resp) => {
               if (!!config?.onSuccess) config.onSuccess(resp);
               console.log('upload success, resp:', resp);
-              model.value = String(state.chooseBase64);
+              // model.value = String(state.chooseBase64);
+              const getFilePathFromResponse: iUploadServiceConfig['getFilePathFromResponse'] | undefined =
+                props.getFilePathFromResponse ||
+                upload?.config.getFilePathFromResponse;
+
+              model.value = getFilePathFromResponse?.(resp);
               state.chooseBase64 = undefined;
               state.status = eImageUploaderStatus.success;
               emit.onUploadSuccess(resp);
+              emit.onUploadComplete();
               dfd.resolve(resp);
             },
             onError: (e) => {
@@ -136,6 +149,7 @@ export const ImageUploader = designComponent({
               console.log('upload fail, e:', e);
               state.status = eImageUploaderStatus.fail;
               emit.onUploadFail(e);
+              emit.onUploadComplete();
               dfd.reject(e);
             },
           };
@@ -160,7 +174,7 @@ export const ImageUploader = designComponent({
         if (!editComputed.value.editable) return;
         await methods.choose();
       },
-      onClickImage: async () => {
+      onClickImage: async (e: iMouseEvent) => {
         if (state.status === eImageUploaderStatus.error) {
           return await handler.onClick();
         }
@@ -168,7 +182,7 @@ export const ImageUploader = designComponent({
         if (!!props.handlePreview) {
           return props.handlePreview(url);
         } else {
-          !!url && $image.preview(url);
+          !!url && $previewer.preview(url, e.currentTarget as any);
         }
       },
       onClickDelete: async () => {
@@ -180,6 +194,15 @@ export const ImageUploader = designComponent({
       },
     };
 
+    const imageAttrs = computed(() => {
+      const ret = Object.keys(ImagePropsOptions).reduce((prev, key) => {
+        prev[key] = (props as any)[key];
+        return prev;
+      }, {} as any);
+      ret.urlPrefix = urlPrefix.value;
+      return ret;
+    });
+
     return {
       refer: {
         refs,
@@ -189,23 +212,18 @@ export const ImageUploader = designComponent({
           {(!!model.value || !!state.chooseBase64) && (
             <Image
               src={model.value || state.chooseBase64}
-              fit={props.fit}
-              alt={props.alt}
-              position={props.position}
               previewOnClick={false}
-              height={props.height}
-              width={props.width}
-              urlPrefix={urlPrefix.value}
               onClick={handler.onClickImage}
+              {...imageAttrs.value}
             />
           )}
           {state.status === eImageUploaderStatus.empty && <div className="image-uploader-empty" onClick={handler.onClick}>
             <Icon icon="pi-image"/>
-            <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.toBeUpload').d('待上传')}</span>}
           </div>}
           {state.status === eImageUploaderStatus.fail && <div className="image-uploader-fail" onClick={handler.onClick}>
             <Icon icon="pi-image-close"/>
-            <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>
+            {!props.hideTips && <span>{i18n.$it('file.uploadFailed').d('上传失败')}</span>}
           </div>}
           <div className="image-uploader-button-group">
             <div className="image-uploader-button" onClick={handler.onClick}>

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;
     }
   }
@@ -351,6 +353,16 @@
           align-items: center;
           justify-content: center;
         }
+
+        &.input-tag-container-wrap {
+          .input-tag {
+            height: auto;
+            min-height: calc(#{$height} - 8px);
+            white-space: normal;
+            word-break: break-all;
+            max-width: 100%;
+          }
+        }
       }
     }
 

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 {eKeyboardKeys, getKeyNameByKeyboardEvent} 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";
 
 /**
@@ -15,10 +15,11 @@ import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
  */
 export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, refs, editComputed, emit, styleComputed }: iInputCompositionData) => {
 
-  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText);
   const { effects } = createEffects();
 
-  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement });
+  const text = useModel(() => props.multipleText as any, emit.onUpdateMultipleText, undefined, effects);
+
+  const { refs: innerRefs, onRef: innerOnRef } = useRefs({ container: iHTMLElement }, { effects });
 
   const handler = {
     onRef: (input: typeof AutoWidthInput.use.class | null) => hooks.onRefInput.exec(input?.refs.input || null),
@@ -59,11 +60,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;
       }
@@ -92,7 +93,7 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
     {
       'input-tag-container-wrap': props.tagsWrap,
     }
-  ]);
+  ], effects);
 
   effects.push(hooks.onRenderDefault.use(() => (
     <span className={classes.value} onMouseDown={handler.onMousedownContainer} ref={innerOnRef.container} data-input-el="container">

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) => {