plain-design 1.0.0-beta.98 → 3.0.0

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

@@ -0,0 +1,44 @@
+import {designComponent, getComponentCls, useClasses, useStyles} from "@peryl/react-compose";
+import './skeleton.scss';
+import {unit} from "@peryl/utils/unit";
+
+export const Skeleton = designComponent({
+  name: 'skeleton',
+  props: {
+    height: { type: String },                             // 骨架高度
+    width: { type: String, default: '100%' },             // 骨架宽度
+    square: { type: Boolean },                            // 根据宽度自适应为正方形
+    full: { type: Boolean },                              // 适配宽高
+    round: { type: Boolean },                             // 圆形圆角
+    radius: { type: String }                              // 自定义圆角
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('skeleton'),
+      {
+        'skeleton-square': !props.height && props.square,
+        'skeleton-full': props.full,
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      const { height, width } = props;
+      height != null && (style.height = height);
+      width != null && (style.width = width);
+      !!props.radius && (style.borderRadius = unit(props.radius));
+      !!props.round && (style.borderRadius = '9999px');
+    });
+
+    return () => {
+      return (
+        <div className={classes.value} style={styles.value}>
+          {slots.default()}
+        </div>
+      );
+    };
+  },
+});
+
+export default Skeleton;

package/src/packages/components/Skeleton/skeleton.scss

@@ -0,0 +1,27 @@
+@include prefix(skeleton) {
+  position: relative;
+  background: #f6f6f6 linear-gradient(to right, white 0, #e8e8e8 50%, white 100%);
+  background-size: 200% 100%;
+  background-position-x: 100%;
+  animation: loading 1500ms linear infinite;
+
+  &.skeleton-square {
+    aspect-ratio: 1;
+  }
+  &.skeleton-full {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position-x: 100%;
+  }
+  50% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: -100%;
+  }
+}

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

@@ -1,5 +1,5 @@
-import {computed, designComponent, Fragment, getComponentCls, reactive, useClasses, useMounted, useRefs, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {computed, designComponent, Fragment, getComponentCls, reactive, useClasses, useMounted, useRefs, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import './slider.scss';
 import {useEdit} from "../../uses/useEdit";
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
@@ -7,7 +7,7 @@ import {createSliderHooks, createSliderUtils, iSliderPublicParams, SliderEmitsOp
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {useSliderRange} from "./useSlider.range";
 import {useSliderSingle} from "./useSlider.single";
-import {doNothing} from "plain-utils/utils/doNothing";
+import {doNothing} from "@peryl/utils/doNothing";
 
 export const Slider = designComponent({
   name: 'slider',

package/src/packages/components/Slider/slider.utils.tsx

@@ -1,6 +1,6 @@
 import {EditProps, tEditComputed} from "../../uses/useEdit";
 import {StyleProps} from "../../uses/useStyle";
-import {ComponentEvent, createHooks, createSyncHooks, ExtractPropTypes, PropType, RenderNode} from "plain-design-composition";
+import {ComponentEvent, createHooks, createSyncHooks, ExtractPropTypes, PropType, RenderNode} from "@peryl/react-compose";
 
 export const SliderPropsOption = {
   ...EditProps,

package/src/packages/components/Slider/useSlider.range.tsx

@@ -1,7 +1,6 @@
 import {iSliderPublicParams} from "./slider.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, useModel, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {useSliderDotDraggier} from "./useSliderDotDragier";
 
 export function useSliderRange(
@@ -14,7 +13,7 @@ export function useSliderRange(
     utils,
   }: iSliderPublicParams) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   /**
    * 创建指示器管理对象
@@ -22,14 +21,16 @@ export function useSliderRange(
    * @date    2022.12.10 15:43
    */
   function createDotManager(type: 'start' | 'end') {
-    const model = type === "start" ? useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }) :
-      useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate });
+    const model = type === "start" ?
+      useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }, effects) :
+      useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate }, effects);
     /**
      * 当前指示器位置百分比
      * @author  韦胜健
      * @date    2022.12.10 15:44
      */
-    const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+    const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+
     /**
      * 指示器行内样式
      * @author  韦胜健
@@ -51,16 +52,18 @@ export function useSliderRange(
       } else {
         styles.transform = `translateY(${length}px)`;
       }
-    });
+    }, effects);
+
     /**
      * 指示器tooltip显示文本
      * @author  韦胜健
      * @date    2022.12.10 15:44
      */
-    const tooltipLabel = computed(() => {
+    const tooltipLabel = effectComputed(() => {
       let ret = model.value;
       return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
     });
+
     /**
      * 指示器拖拽处理对象
      * @author  韦胜健
@@ -117,7 +120,7 @@ export function useSliderRange(
       styles.transform = `translateY(${start.percent.value * totalLength.value}px) scaleY(${percentValue})`;
       styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
     }
-  });
+  }, effects);
 
   /**
    * 拖拽的时候一直显示tooltip

package/src/packages/components/Slider/useSlider.single.tsx

@@ -1,7 +1,6 @@
 import {iSliderPublicParams} from "./slider.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, useModel, useStyles} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
+import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
 import {useSliderDotDraggier} from "./useSliderDotDragier";
 
 export function useSliderSingle(
@@ -14,16 +13,16 @@ export function useSliderSingle(
     editComputed,
   }: iSliderPublicParams) {
 
-  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate });
+  const { effects, effectComputed } = createEffectsOfReaction();
 
-  const { effects } = createEffects();
+  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate }, effects);
 
   /**
    * 当前百分比
    * @author  韦胜健
    * @date    2022.12.10 15:42
    */
-  const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+  const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
 
   /**
    * 进度条行内样式
@@ -44,7 +43,7 @@ export function useSliderSingle(
       styles.transform = `scaleY(${percentValue})`;
       styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
     }
-  });
+  }, effects);
 
   /**
    * 指示器行内样式
@@ -60,7 +59,7 @@ export function useSliderSingle(
     } else {
       styles.transform = `translateY(${length}px)`;
     }
-  });
+  }, effects);
 
   /**
    * 指示器拖拽行为
@@ -83,7 +82,7 @@ export function useSliderSingle(
    * @author  韦胜健
    * @date    2022.12.10 15:43
    */
-  const tooltipLabel = computed(() => {
+  const tooltipLabel = effectComputed(() => {
     let ret = model.value;
     return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
   });

package/src/packages/components/Slider/useSliderDotDragier.tsx

@@ -1,7 +1,7 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-import {iMouseEvent, reactive} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
+import {iMouseEvent, reactive} from "@peryl/react-compose";
 import {iSliderHooks} from "./slider.utils";
 import {ClientZoom} from "../ClientZoom";
 

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

@@ -1,8 +1,8 @@
-import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import './sort-list.scss';
-import {createEffects} from "plain-utils/utils/createEffects";
-import {addWindowListener} from "plain-utils/dom/addWindowListener";
-import {getRectAutoFormat} from "plain-utils/dom/getRectAutoFormat";
+import {createEffects} from "@peryl/utils/createEffects";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
+import {getRectAutoFormat} from "@peryl/utils/getRectAutoFormat";
 import {iElementRect} from "../../utils/getRowEl";
 
 export const SortList = designComponent({

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

@@ -1,5 +1,5 @@
 import './space.scss';
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const Space = designComponent({

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

@@ -1,10 +1,10 @@
-import {CSSProperties, designComponent, getComponentCls, iHTMLDivElement, isReact, mergeAttrs, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import {CSSProperties, designComponent, getComponentCls, iHTMLDivElement, isReact, mergeAttrs, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import './stack-card.scss';
 import {findReactElement} from "../../utils/findReactElement";
 import StackCardItem from "../StackCardItem";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {delay} from "plain-utils/utils/delay";
-import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {createEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
+import {addWindowListener} from "@peryl/utils/addWindowListener";
 
 export const StackCard = designComponent({
   name: 'stack-card',

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
 
 export const StackCardItem = designComponent({
   name: 'stack-card-item',

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, iMouseEvent, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, iMouseEvent, useClasses, useRefs} from "@peryl/react-compose";
 import {StepCollector} from "../StepGroup";
 import {StepStatus, StepUtils} from "../StepGroup/step.utils";
 import Icon from "../Icon";

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClasses, useCollect, useRefs} from "@peryl/react-compose";
 import {StepUtils} from "./step.utils";
 import './step-group.scss';
 import Step from "../Step";

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

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

package/src/packages/components/TabGroup/TabsHeader.tsx

@@ -1,4 +1,4 @@
-import {classnames, designComponent, onBeforeUnmount, onMounted, PropType, reactive, useRefs, useStyles} from "plain-design-composition";
+import {classnames, designComponent, onBeforeUnmount, onMounted, PropType, reactive, useRefs, useStyles} from "@peryl/react-compose";
 import {TabData} from "./tabs.utils";
 
 export const TabsHeader = designComponent({

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -1,4 +1,4 @@
-import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
+import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "@peryl/react-compose";
 import {PlTabComponent} from "../Tab";
 
 export const TabsInner = designComponent({

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontal.tsx

@@ -1,11 +1,11 @@
-import {designComponent, onUpdated, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, onUpdated, reactive, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {TabCommonProps} from "../../tabs.utils";
 import {TabsHeaderHorizontalText} from "./TabsHeaderHorizontalText";
 import {TabsHeaderHorizontalCard} from "./TabsHeaderHorizontalCard";
 import {TabsHeaderHorizontalShadow} from "./TabsHeaderHorizontalShadow";
 import './tabs-header-horizontal.scss';
-import {delay} from "plain-utils/utils/delay";
-import {unit} from "plain-utils/string/unit";
+import {delay} from "@peryl/utils/delay";
+import {unit} from "@peryl/utils/unit";
 import {Button} from "../../../Button";
 
 export const TabsHeaderHorizontal = designComponent({

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalCard.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {TabCommonProps} from "../../tabs.utils";
 import './tabs-header-card.scss';
 

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalShadow.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {TabCommonProps} from "../../tabs.utils";
 import './tabs-header-shadow.scss';
 

package/src/packages/components/TabGroup/header/horizontal/TabsHeaderHorizontalText.tsx

@@ -1,7 +1,7 @@
-import {designComponent, onUpdated, reactive, useStyles} from "plain-design-composition";
+import {designComponent, onUpdated, reactive, useStyles} from "@peryl/react-compose";
 import {TabCommonProps} from "../../tabs.utils";
 import './tabs-header-text.scss';
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {TabsHeaderHorizontal} from "./TabsHeaderHorizontal";
 
 interface ElItemInfo {

package/src/packages/components/TabGroup/header/vertical/TabsHeaderVertical.tsx

@@ -1,4 +1,4 @@
-import {designComponent, useClasses} from "plain-design-composition";
+import {designComponent, useClasses} from "@peryl/react-compose";
 import './tabs-header-vertical.scss';
 import {TabCommonProps} from "../../tabs.utils";
 

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

@@ -1,4 +1,4 @@
-import {classnames, computed, designComponent, getComponentCls, useClasses, useCollect, useModel, watch} from "plain-design-composition";
+import {classnames, computed, designComponent, getComponentCls, useClasses, useCollect, useModel, watch} from "@peryl/react-compose";
 import './tabs.scss';
 import {TabCommonProps, TabData} from "./tabs.utils";
 import {TabsInner} from "./TabsInner";

package/src/packages/components/TabGroup/tabs.scss

@@ -6,6 +6,10 @@
     display: block;
   }
 
+  .tabs-header {
+    background-color: plv(bg-2);
+  }
+
   .tabs-header-item {
     cursor: pointer;
     user-select: none;
@@ -34,6 +38,25 @@
     }
   }
 
+  .inner-tab {
+    & > .#{componentName(auto-table)}:first-child, & > .#{componentName(page-card)}:first-child {
+      .auto-table-body, & > div:first-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
   @include sizeMixin(tab-group, (font-size)) {
+    .tabs-header {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+
+      .tabs-header-list {
+        box-sizing: border-box;
+        padding-left: $margin;
+        padding-right: $margin;
+      }
+    }
   }
 }

package/src/packages/components/TabGroup/tabs.utils.tsx

@@ -1,4 +1,4 @@
-import {PropType} from "plain-design-composition";
+import {PropType} from "@peryl/react-compose";
 import {PlTabComponent} from "../Tab";
 
 export enum TabHeadType {

package/src/packages/components/Table/editor/PlcAddress.tsx

@@ -1,4 +1,4 @@
-import {designComponent, PropType} from "plain-design-composition";
+import {designComponent, PropType} from "@peryl/react-compose";
 import {iAddressService} from "../../$address/createAddressService";
 import {nextPlcBindId} from "../plc/utils/plc.utils";
 import {PlcAddressItem} from "./PlcAddressItem";

package/src/packages/components/Table/editor/PlcAddressItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, PropType} from "plain-design-composition";
+import {designComponent, PropType} from "@peryl/react-compose";
 import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcCheckbox.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcColorPicker.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcDate.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcDate.utils.tsx

@@ -1,8 +1,8 @@
-import {computed, ExtractPropTypes, PropType} from "plain-design-composition";
+import {computed, ExtractPropTypes, PropType} from "@peryl/react-compose";
 import {eDatePanel} from "../../DatePicker/date.utils";
 import {eMultipleValueType} from "../../../uses/useMultipleModel";
 import {createPlcPropOptions} from "../plc/utils/plc.utils";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 
 /**
  * PlcDate继承于Date组件的属性

package/src/packages/components/Table/editor/PlcDateRange.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, PropType} from "@peryl/react-compose";
 import {nextPlcBindId, PlcPropsOptions} from "../plc/utils/plc.utils";
 import {iPlcDatePropsType, PlcDateInheritProps, usePlcDateInheritProps} from "./PlcDate.utils";
 import {PlcDate} from "./PlcDate";

package/src/packages/components/Table/editor/PlcInput.tsx

@@ -1,5 +1,5 @@
 import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";
 import Input from "../../Input";

package/src/packages/components/Table/editor/PlcNumber.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcRate.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/editor/PlcSelect.tsx

@@ -1,5 +1,5 @@
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
-import {computed, designComponent, Fragment} from "plain-design-composition";
+import {computed, designComponent, Fragment} from "@peryl/react-compose";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";
 import {Select} from "../../Select";
@@ -51,6 +51,7 @@ export const PlcSelect = designComponent({
     const filterConfig = computed((): iFilterConfigSelect => {
       return {
         renderOptions: () => slots.default(),
+        getSelectOptions: () => selectOptionDecoder.options.map((so: any) => ({ label: so.props.label, val: so.props.val })),
         ...props.filterConfig,
       };
     });

package/src/packages/components/Table/editor/PlcTextarea.tsx

@@ -1,5 +1,5 @@
 import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";
 import Input from "../../Input";

package/src/packages/components/Table/editor/PlcTime.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {PlcEmitsOptions} from "../plc/utils/plc.utils";

package/src/packages/components/Table/editor/PlcTime.utils.ts

@@ -1,7 +1,7 @@
 import {TimePublicProps} from "../../TimePicker/panel/time-panel.utils";
 import {PlcPropsOptions} from "../plc/utils/plc.utils";
-import {computed, ExtractPropTypes} from "plain-design-composition";
-import {pick} from "plain-utils/object/pick";
+import {computed, ExtractPropTypes} from "@peryl/react-compose";
+import {pick} from "@peryl/utils/pick";
 
 export const PlcTimePropsOptions = {
   ...PlcPropsOptions,

package/src/packages/components/Table/editor/PlcTimeRange.tsx

@@ -1,4 +1,4 @@
-import {designComponent, PropType} from "plain-design-composition";
+import {designComponent, PropType} from "@peryl/react-compose";
 import {iPlcTimePropsType, PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
 import {nextPlcBindId} from "../plc/utils/plc.utils";
 import {PlcTime} from "./PlcTime";

package/src/packages/components/Table/editor/PlcToggle.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
 import {usePlc} from "../plc/use/usePlc";

package/src/packages/components/Table/plc/group/PlcGroup.tsx

@@ -1,4 +1,4 @@
-import {designComponent, useCollect} from "plain-design-composition";
+import {designComponent, useCollect} from "@peryl/react-compose";
 import {PlcGroupPropsOptions} from "../utils/plc.utils";
 import {Plc} from "../plc/Plc";
 import {PlcGroupScopeSlotsOptions, PlcGroupSlotsOptions} from "../utils/plc.scope-slots";

package/src/packages/components/Table/plc/plc/Plc.tsx

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {PlcEmitsOptions, PlcPropsOptions} from "../utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../utils/plc.scope-slots";
 import {useBasePlc} from "../use/useBasePlc";

package/src/packages/components/Table/plc/process/copyPlcList.ts

@@ -1,4 +1,4 @@
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {PlcPublicAttrs, tPlcType} from "../utils/plc.utils";
 
 /**

package/src/packages/components/Table/plc/process/processPlcFixed.ts

@@ -1,4 +1,4 @@
-import {StyleProperties} from "plain-design-composition";
+import {StyleProperties} from "@peryl/react-compose";
 import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
 
 /**

package/src/packages/components/Table/plc/process/processPlcSort.ts

@@ -1,5 +1,5 @@
 import {IteratePlcHandleType, iteratePlcList} from "../utils/iteratePlcList";
-import {insertSort} from "plain-utils/object/insertSort";
+import {insertSort} from "@peryl/utils/insertSort";
 import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
 
 /**

package/src/packages/components/Table/plc/use/useBasePlc.tsx

@@ -1,12 +1,12 @@
 import {iPlcEventType, nextPlcKey, PlcPropsOptions, PlcPublicAttrs, tPlc} from "../utils/plc.utils";
-import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
+import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "@peryl/react-compose";
 import {PlcCollector} from "../group/PlcGroup";
 import {usePlcPropsState} from "./usePlcPropsState";
 import {tPlcScopeSlots, tPlcSlots} from "../utils/plc.scope-slots";
 import {Validation} from "../../../Form/validate/createValidation";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {isRuleRequired} from "../../../Form/validate/validate.utils";
-import {pick} from "plain-utils/object/pick";
+import {pick} from "@peryl/utils/pick";
 import {PlcExclusion} from "../../standard/PlcExclusion";
 
 export function useBasePlc(

package/src/packages/components/Table/plc/use/useBasePlcGroup.tsx

@@ -1,4 +1,4 @@
-import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
+import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "@peryl/react-compose";
 import {PlcCollector} from "../group/PlcGroup";
 import {usePlcPropsState} from "./usePlcPropsState";
 import {nextPlcKey, PlcGroupPropsOptions, PlcPublicAttrs, tPlcGroup} from "../utils/plc.utils";