plain-design 1.0.0-beta.99 → 3.0.1

package/src/packages/components/DatePicker/createRangeDateRender.range.tsx

@@ -1,11 +1,11 @@
 import {tDateCompositionPublicParams} from "./date.utils";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import Input from "../Input";
 import {useRangeDateRender} from "./useRangeDateRender";
 import {DatePanel} from "./panel/DatePanel";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 /**
@@ -55,7 +55,7 @@ export function createRangeDateRenderRange(params: tDateCompositionPublicParams)
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard<iKeyboardEvent>({
       enter: () => popper.methods.toggle(),
       esc: () => popper.methods.hide(),
     })(e),

package/src/packages/components/DatePicker/createRangeDateRender.separate.tsx

@@ -1,12 +1,12 @@
 import {TimeRangePanelType} from "../TimePicker/panel/TimeRangePanel";
-import {handleKeyboard} from "../KeyboardService";
+import {handleKeyboard} from "@peryl/utils/keyboard";
 import Input from "../Input";
 import {tDateCompositionPublicParams} from "./date.utils";
 import {useRangeDateRender} from "./useRangeDateRender";
 import {DatePanel} from "./panel/DatePanel";
 import {createPopupEditor} from "../usePopupEditor";
 import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "plain-design-composition";
+import {iKeyboardEvent} from "@peryl/react-compose";
 import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
 
 /**
@@ -80,7 +80,7 @@ export function createRangeDateRenderSeparate(params: tDateCompositionPublicPara
      * @author  韦胜健
      * @date    2022.7.3 19:29
      */
-    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard<iKeyboardEvent>({
       enter: () => {
         utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
       },

package/src/packages/components/DatePicker/date.utils.tsx

@@ -3,9 +3,9 @@
  * @author  韦胜健
  * @date    2021/1/18 10:43
  */
-import {ComponentEvent, createSyncHooks, ExtractPropTypes, getComponentCls, mergeAttrs, PropType, RenderNode, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, createSyncHooks, ExtractPropTypes, getComponentCls, mergeAttrs, PropType, RenderNode, tSlotsType} from "@peryl/react-compose";
 import {PDate, plainDate} from "../../utils/plainDate";
-import {classnames} from "plain-utils/dom/classnames";
+import {classnames} from "@peryl/utils/classnames";
 import {UseDateType} from "./panel/useDatePanel";
 import {eMultipleValueType} from "../../uses/useMultipleModel";
 import {EditProps, tEditComputed} from "../../uses/useEdit";

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

@@ -1,5 +1,5 @@
 import './date.scss';
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {DatePanel} from "./panel/DatePanel";
 import {DatePanelDate} from "./panel/DatePanelDate";
 import {DatePanelMonth} from "./panel/DatePanelMonth";
@@ -18,10 +18,12 @@ import {createDateRenderSingle} from "./createDateRender.single";
 import {plainDate} from "../../utils/plainDate";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import Input from "../Input";
 
 export const DatePicker = designComponent({
   name: '-date-picker',
   props: DatePropsOptions,
+  inheritPropsType: Input,
   expose: {
     DatePanel,
     DatePanelDate,

package/src/packages/components/DatePicker/panel/DatePanel.tsx

@@ -1,5 +1,5 @@
 import {DatePublicEmits, DatePublicProps, eDateEmitRangeType, eDatePanel} from "../date.utils";
-import {computed, designComponent, useModel} from "plain-design-composition";
+import {computed, designComponent, useModel} from "@peryl/react-compose";
 import {DatePanelYear} from "./DatePanelYear";
 import {DatePanelMonth} from "./DatePanelMonth";
 import {DatePanelRange} from "./DatePanelRange";

package/src/packages/components/DatePicker/panel/DatePanelDate.tsx

@@ -1,10 +1,10 @@
-import {classnames, computed, createEventListener, designComponent, getComponentCls, iMouseEvent, PropType} from "plain-design-composition";
+import {classnames, computed, createEventListener, designComponent, getComponentCls, iMouseEvent, PropType} from "@peryl/react-compose";
 import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateView, eDateViewSeq, eSlideTransitionDirection} from "../date.utils";
 import {PDate, plainDate} from "../../../utils/plainDate";
 import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
 import {Button} from "../../Button";
 import {DatePanelMonth} from "./DatePanelMonth";
-import {zeroize} from "plain-utils/string/zeroize";
+import {zeroize} from "@peryl/utils/zeroize";
 import {TimePanel} from "../../TimePicker/panel/TimePanel";
 import {ThemeSize} from "../../../uses/useStyle";
 import i18n from "../../i18n";

package/src/packages/components/DatePicker/panel/DatePanelMonth.tsx

@@ -1,5 +1,5 @@
 import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, eDateView, eSlideTransitionDirection} from "../date.utils";
-import {computed, designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
 import {Button} from "../../Button";
 import {DatePanelYear} from "./DatePanelYear";

package/src/packages/components/DatePicker/panel/DatePanelQuarter.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls} from "@peryl/react-compose";
 import {DatePublicEmits, DatePublicProps} from "../date.utils";
 import {useDateWeek} from "./useDateWeek";
 import {UseDateJudgementView} from "./useDatePanel";

package/src/packages/components/DatePicker/panel/DatePanelRange.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType} from "@peryl/react-compose";
 import {DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateEmitRangeType, eDateView} from "../date.utils";
 import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
 import {PDate, plainDate} from "../../../utils/plainDate";

package/src/packages/components/DatePicker/panel/DatePanelWeek.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls} from "@peryl/react-compose";
 import {DatePublicEmits, DatePublicProps} from "../date.utils";
 import {useDateWeek} from "./useDateWeek";
 import {UseDateJudgementView} from "./useDatePanel";

package/src/packages/components/DatePicker/panel/DatePanelYear.tsx

@@ -1,5 +1,5 @@
 import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, eSlideTransitionDirection} from "../date.utils";
-import {computed, designComponent, getComponentCls} from "plain-design-composition";
+import {computed, designComponent, getComponentCls} from "@peryl/react-compose";
 import Button from "../../Button";
 import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
 import {ThemeSize} from "../../../uses/useStyle";

package/src/packages/components/DatePicker/panel/useDatePanel.tsx

@@ -5,8 +5,8 @@
  */
 import {PDate, plainDate} from "../../../utils/plainDate";
 import {DateItemData, DefaultDateFormatString, eDateEmitRangeType, eDateView, eSlideTransitionDirection, tDatePublicPropsType} from "../date.utils";
-import {computed, inject, provide, reactive, useModel, watch} from "plain-design-composition";
-import {toArray} from "plain-utils/utils/toArray";
+import {computed, inject, provide, reactive, useModel, watch} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 
 export const DATE_PANEL_PROVIDER = '@@DATE_PANEL_PROVIDER';
 

package/src/packages/components/DatePicker/panel/useDateWeek.tsx

@@ -1,8 +1,8 @@
 import {DateItemData, tDatePublicPropsType} from "../date.utils";
 import {UseDateEmit, UseDateJudgementView, useDatePanel} from "./useDatePanel";
 import {PDate} from "../../../utils/plainDate";
-import {computed, reactive} from "plain-design-composition";
-import {toArray} from "plain-utils/utils/toArray";
+import {computed, reactive} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
 
 export function useDateWeek(
   {

package/src/packages/components/DatePicker/useRangeDateRender.tsx

@@ -1,13 +1,12 @@
 import {eDateEmitRangeType, tDateCompositionPublicParams} from "./date.utils";
 import {TimeRangePanelType} from "../TimePicker/panel/TimeRangePanel";
-import {computed, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {useFocusHandler} from "../../uses/useFocusHandler";
 import {PDate, plainDate} from "../../utils/plainDate";
 import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
 import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
 import {iPopupEditor} from "../usePopupEditor";
 
 export function useRangeDateRender(
@@ -29,11 +28,11 @@ export function useRangeDateRender(
     getStartPopper?: () => iPopupEditor,
     getEndPopper?: () => iPopupEditor,
   }) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, }, { effects });
   const reference = useRenderReference();
-  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
-  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
+  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
+  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);
 
   const { isFocus } = useFocusHandler({
     getEls: () => [refs.start, refs.end],
@@ -60,9 +59,10 @@ export function useRangeDateRender(
       onBlur();
     },
     onFocus: emit.onFocus,
+    effects,
   });
 
-  const format = computed((): { start: null | PDate, end: null | PDate } => ({
+  const format = effectComputed((): { start: null | PDate, end: null | PDate } => ({
     start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
     end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
   }));

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

@@ -1,16 +1,16 @@
-import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "plain-design-composition";
+import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, onBeforeUnmount, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {DialogAlign, DialogAnimations, DialogCloseType, DialogPositions} from "./utils/dialog.utils";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import './dialog.scss';
 import {i18n} from "../../i18n";
 import {Icon} from "../Icon";
 import {Button} from "../Button";
 import {DialogMouse} from "./utils/dialog.mouse";
-import {delay} from "plain-utils/utils/delay";
-import {throttle} from "plain-utils/utils/throttle";
+import {delay} from "@peryl/utils/delay";
+import {throttle} from "@peryl/utils/throttle";
 import {LoadingMask} from "../LoadingMask";
-import KeyboardService, {KeyboardServiceOption} from "../KeyboardService";
+import {KeyboardService, KeyboardServiceOption} from "@peryl/utils/keyboard";
 import {useDialogMovable} from "./useDialogMovable";
 import {InnerTransition} from "../../utils/InnerTransition";
 import {StyleProps, useStyle} from "../../uses/useStyle";
@@ -81,7 +81,6 @@ export const Dialog = designComponent({
     const { styleComputed } = useStyle();
 
     const { emit } = event;
-
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const open = useModel(() => props.open, emit.onUpdateOpen);
 
@@ -320,6 +319,11 @@ export const Dialog = designComponent({
       }, 300, { trailing: false }),
     };
 
+    onBeforeUnmount(() => {
+      methods.confirm.dispose();
+      methods.cancel.dispose();
+    });
+
     watch(() => model.value, async show => {
       await nextTick();
       await (show ? methods.show() : methods.hide());
@@ -364,7 +368,7 @@ export const Dialog = designComponent({
         KeyboardService.cancelActiveElement();
       });
       hooks.beforeHide.use(() => {
-        KeyboardService.unbindListener(handler.keyboardEventOption);
+        KeyboardService.unbind(handler.keyboardEventOption);
       });
     })();
 

package/src/packages/components/Dialog/useDialogMovable.tsx

@@ -1,4 +1,4 @@
-import {watchEffect} from "plain-design-composition";
+import {watchEffect} from "@peryl/react-compose";
 import {ClientZoom} from "../..";
 
 export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement | undefined | null, content: HTMLElement | undefined | null }, movable: { value: boolean } }) {

package/src/packages/components/Dialog/utils/dialog.utils.ts

@@ -1,4 +1,4 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 /*弹框位置可选项*/
 export const DialogPositions = createEnum(['center', 'top', 'bottom', 'left', 'right'] as const);

package/src/packages/components/Dropdown/dropdown.utils.tsx

@@ -1,6 +1,5 @@
-import {getComponentCls, mergeAttrs, RenderNode} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createProvider} from "../../utils/createProvider";
+import {createProvider, getComponentCls, mergeAttrs, RenderNode} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
 import './dropdown.public.scss';
 import {ePopupTrigger} from "../usePopup/utils/popup.utils";

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

@@ -1,16 +1,18 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "@peryl/react-compose";
 import './dropdown.scss';
 import {DropdownContextProvider, DropdownOptionAlign, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownContext, iDropdownOptionContext, renderDropdownPanel} from "./dropdown.utils";
 import {findReactElement} from "../../utils/findReactElement";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {Scroll} from "../Scroll";
-import {delay} from "plain-utils/utils/delay";
-import {debounce} from "plain-utils/utils/debounce";
+import {delay} from "@peryl/utils/delay";
+import {debounce} from "@peryl/utils/debounce";
 import {DropdownOption} from "../DropdownOption";
 import {DropdownGroup} from "../DropdownGroup";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {Popup} from "../Popup";
 import {ePopupTrigger, iPopupAnimation, iPopupPlacement, iPopupTrigger} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
 
 export const Dropdown = designComponent({
   name: '-dropdown',
@@ -30,6 +32,7 @@ export const Dropdown = designComponent({
 
     id: { type: String },                                                                 // 调试plain-popper标识
     optionWidth: {},                                                                      // option选项宽度
+    scrollHeight: { type: Number },                                                       // 选项过多时自定义滚动高度
   },
   emits: {
     onUpdateModelValue: (val?: boolean) => true,
@@ -46,6 +49,8 @@ export const Dropdown = designComponent({
   },
   setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { styleComputed } = useStyle();
 
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
@@ -58,6 +63,14 @@ export const Dropdown = designComponent({
 
     const dropdownContentWidth = computed(() => !props.optionWidth ? undefined : unit(props.optionWidth as any)!);
 
+    const scrollHeight = computed((): number => {
+      if (props.scrollHeight != null) {return props.scrollHeight;}
+      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
+      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
+      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
+      return itemHeight * 6;
+    });
+
     const handler: iDropdownContext["handler"] = {
       onClickOption: (optionContext) => {
         if (optionContext.hasChildren.value) {
@@ -110,7 +123,7 @@ export const Dropdown = designComponent({
       } else {
         return renderDropdownPanel({
           ...publicDropdownPanelParams,
-          attrs: { style: { height: '200px', width: dropdownContentWidth.value, }, key },
+          attrs: { style: { height: scrollHeight.value + 'px', width: dropdownContentWidth.value, }, key },
           content: <>
             <Scroll>
               {children}

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 
 export const DropdownGroup = designComponent({
   name: 'dropdown-group',

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

@@ -1,7 +1,7 @@
-import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {ePopupTrigger} from "../usePopup/utils/popup.utils";
 
 const nextOptionId = createCounter('dropdown-option');

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 
 export const DropdownSeparator = designComponent({
   name: 'dropdown-separator',

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, useStyles} from "@peryl/react-compose";
 import './empty.scss';
 import i18n from "../i18n";
 

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

@@ -1,5 +1,5 @@
-import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, designComponent, Fragment, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
 import './filter-form-multiple.scss';
@@ -9,7 +9,7 @@ import {InputGroup} from "../InputGroup";
 import {Button} from "../Button";
 import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
 import {incrementalMerge} from "../../utils/incrementalMerge";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 import i18n from "../i18n";
@@ -95,9 +95,12 @@ export const FilterFormMultiple = designComponent({
      * @author  韦胜健
      * @date    2023.1.6 16:00
      */
-    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
-      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
-    )));
+    const usingFilterOptions = computed(() => {
+      // console.warn('run usingFilterOptions');
+      return (props.filterOptions || []).map(i => (
+        { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
+      ));
+    });
 
     /**
      * props.filterOptions变化时更新内部状态
@@ -240,7 +243,9 @@ export const FilterFormMultiple = designComponent({
                           <SelectOption label={handler!.label()} val={handler!.name} key={handler!.name}/>
                         ))}
                       </Select>
-                      {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      <Fragment key={filterOption.filterHandler}>
+                        {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      </Fragment>
                     </InputGroup>
                   </FormItem>
                 );