plain-design 1.0.0-beta.98 → 3.0.0

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

@@ -1,24 +1,23 @@
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
-import {computed, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, 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 {createPopupEditor} from "../usePopupEditor";
 
 export function useSuggestionInput({ props, hooks, editComputed, styleComputed, refs, model, parentPopupId }: iInputCompositionData) {
 
   /*记录副作用函数*/
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs: innerRefs, onRef: innerOnRef } = useRefs({
     /*需要scroll引用，当有scroll的时候，每次关闭都需要滚动回顶部*/
     scroll: Scroll,
-  });
+  }, { effects });
 
   const state = reactive({
     searchText: null as any,          // 搜索关键字
@@ -30,7 +29,7 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
   let matchOptionPropsList: iSelectOptionProps[] = [];
 
   /*自动补全的数据*/
-  const suggestion = computed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
+  const suggestion = effectComputed((): string[] | undefined => typeof props.suggestion === "function" ? props.suggestion(state.searchText) : props.suggestion!);
 
   /*管理select panel的hover状态*/
   const hover = createSelectHover({
@@ -72,7 +71,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;}
@@ -137,9 +136,10 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
           searchText,
           props: {
             scrollNum: 6,
-            scrollHeight: 150,
+            scrollHeight: 200,
           },
           onRefScroll: innerOnRef.scroll,
+          scrollHeight: { value: 200 }
         });
         matchOptionPropsList = _matchOptionPropsList;
         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');
@@ -37,8 +37,8 @@ export function useTextareaInput(data: iInputCompositionData) {
     'input-box input-fill input-textarea-container',
     {
       'input-textarea-has-height': !!state.height || !!props.height || !!props.maxHeight,
-    }
-  ]);
+    },
+  ], effects);
 
   const takeoverStyles = useStyles(style => {
     if (!!props.height || !!state.height) {
@@ -50,7 +50,7 @@ export function useTextareaInput(data: iInputCompositionData) {
     if (!!props.maxHeight) {
       style.maxHeight = unit(props.maxHeight);
     }
-  });
+  }, effects);
 
   effects.push(useTextareaResize({ ...data, onResize: (val) => state.height = val }));
 

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

@@ -1,8 +1,9 @@
-import {reactive, watch} from "plain-design-composition";
-import {doNothing} from "plain-utils/utils/doNothing";
-import {throttle} from "plain-utils/utils/throttle";
+import {onBeforeUnmount, 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";
+import {createEffects} from "@peryl/utils/createEffects";
 
 /**
  * 自动监听input ref动作
@@ -39,34 +40,44 @@ export function useInputEnterHandler(
   };
 
   const enterHandler = reactive({ value: doNothing, });
+  const { effects: throttleEffects } = createEffects();
 
   watch(() => props.throttleEnter, (val) => {
+    throttleEffects.clear();
     if (!val) {
       enterHandler.value = innerHandler;
     }
     if (val === true) {
       val = 1000;
     }
-    enterHandler.value = throttle(innerHandler, val as number, { trailing: true });
+    const throttleHandler = throttle(innerHandler, val as number, { trailing: true });
+    throttleEffects.push(() => throttleHandler.dispose());
+    enterHandler.value = throttleHandler;
   }, { immediate: true });
 
   const handler = {
-    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);
       }
     },
   };
 
+  const { effects } = createEffects();
+
   hooks.onRefInput.use(input => {
-    if (!!input) {input.removeEventListener('keydown', handler.onKeydown);}
-    handler.input = input;
-    if (!handler.input) {return;}
-    handler.input.addEventListener('keydown', handler.onKeydown);
+    effects.clear();
+    if (!input) {return;}
+    input.addEventListener('keydown', handler.onKeydown);
+    effects.push(() => {input.removeEventListener('keydown', handler.onKeydown);});
+  });
+
+  onBeforeUnmount(() => {
+    effects.clear();
+    throttleEffects.clear();
   });
 }

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/InputGroup/input-group.scss

@@ -33,5 +33,14 @@
         border-left-color: transparent;
       }
     }
+
+    &.#{componentName(input)} + .#{componentName(button)} {
+      margin-left: -1px;
+    }
+
+    &.#{componentName(button)} + .#{componentName(input)},
+    &.#{componentName(button)} + .#{componentName(button)} {
+      margin-left: -1px;
+    }
   }
 }

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.scss

@@ -30,6 +30,7 @@
   &.number-button-type-right {
     .number-button-container {
       display: flex;
+      color: plv(text-2);
       flex-direction: column;
       align-items: stretch;
       justify-content: center;
@@ -73,6 +74,8 @@
 @include prefix(number-resize) {
   padding-left: 100%;
   position: relative;
+  color: plv(text-2);
+
   & > div {
     position: absolute;
     @include inset;

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,19 +1,26 @@
-import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
 import './layout.scss';
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const Layout = designComponent({
   name: 'layout',
   props: {
-    vertical: { type: Boolean }
+    vertical: { type: Boolean },
+    fullHeight: { type: Boolean },
+    ...StyleProps,
   },
   provideRefer: true,
   slots: ['default'],
   setup({ props, slots }) {
 
+    const { styleComputed } = useStyle();
+
     const classes = useClassCache(() => [
       getComponentCls('layout'),
+      `layout-size-${styleComputed.value.size}`,
       {
         'layout-vertical': props.vertical,
+        'layout-full-height': props.fullHeight,
       }
     ]);
 

package/src/packages/components/Layout/layout.scss

@@ -9,7 +9,27 @@ $resize-width: 12px;
     flex-direction: column;
   }
 
+  &.layout-full-height {
+    height: 100%;
+  }
+
   & > .#{componentName(layout-section)} {
+
+    &.layout-section-padding {
+      @include sizeMixin(layout-section, ()) {
+        & > .layout-section-inner {
+          padding: $margin;
+        }
+      }
+    }
+
+    &.layout-section-fixed-inner {
+      .layout-section-inner {
+        position: absolute;
+        inset: 0;
+      }
+    }
+
     &.layout-section-position-center {
       flex: 1;
       position: relative;

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);

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

@@ -1,15 +1,19 @@
-import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import Layout from "../Layout";
 import {eLayoutSectionPosition} from "../Layout/layout.utils";
 import {useLayoutSectionResizer} from "./useLayoutSectionResizer";
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const LayoutSection = designComponent({
   name: 'layout-section',
   props: {
     position: { type: String as PropType<typeof eLayoutSectionPosition.TYPE>, default: eLayoutSectionPosition.center },
     modelValue: { type: Number },
-    collapse: { type: Boolean }
+    collapse: { type: Boolean },
+    fixedInner: { type: Boolean },
+    noPadding: { type: Boolean },
+    ...StyleProps,
   },
   emits: {
     onUpdateModelValue: (val?: number) => true,
@@ -20,6 +24,8 @@ export const LayoutSection = designComponent({
 
     const layout = Layout.use.inject();
 
+    const { styleComputed } = useStyle();
+
     const { refs, onRef } = useRefs({ el: iHTMLDivElement });
 
     const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
@@ -29,9 +35,12 @@ export const LayoutSection = designComponent({
     const classes = useClassCache(() => [
       getComponentCls('layout-section'),
       `layout-section-position-${props.position}`,
+      `layout-section-size-${styleComputed.value.size}`,
       {
         'layout-section-fixed': !!model.value,
         'layout-section-collapse': collapseModel.value,
+        'layout-section-fixed-inner': props.fixedInner,
+        'layout-section-padding': !props.noPadding,
       }
     ]);
 

package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx

@@ -1,7 +1,7 @@
 import Icon from "../Icon";
 import {eLayoutSectionPosition} from "../Layout/layout.utils";
-import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import {ClientZoom} from "../../utils/ClientZoom";
 
 export function useLayoutSectionResizer(

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useRefs} from "@peryl/react-compose";
 import React, {ReactElement} from "react";
 import FlipMove from "react-flip-move";
 import './list.scss';

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

@@ -0,0 +1,20 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+
+export const ListOption = designComponent({
+  name: 'list-option',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    label: { type: String }
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClassCache(() => [getComponentCls('list-option')]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default(props.label)}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,30 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './list-panel.scss';
+
+export const ListPanel = designComponent({
+  name: 'list-panel',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    useEdit();
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('list-panel'),
+      `list-panel-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/ListPanel/list-panel.scss

@@ -0,0 +1,20 @@
+@include comp(list-panel) {
+
+  padding: 0 2px;
+
+  @include sizeMixin(list-panel, ()) {
+
+    @include comp(list-option) {
+      font-size: $font-size;
+      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+      border-radius: $border-radius;
+      margin: 2px 0;
+      cursor: pointer;
+      transition: all ease 300ms;
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+
+  }
+}

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
-import {PlainLoading} from 'plain-icons/src/packages/component/loading/react';
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
+import {PlainLoading} from '@peryl/icon/src/packages/component/loading/react';
 import './loading.scss';
 
 export const Loading = designComponent({

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

@@ -1,5 +1,5 @@
-import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {designComponent, getComponentCls, mergeAttrs, nextIndex, onMounted, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import Loading from "../Loading";
 import './loading-mask.scss';
 import Transition from "../Transition";