plain-design 1.0.0-beta.98 → 3.0.0

package/src/packages/i18n/i18n.utils.ts

@@ -1,7 +1,7 @@
-import {createSyncHooks, reactive} from "plain-design-composition";
+import {anonymousEffects, createHooks, reactive} from "@peryl/react-compose";
 import {ZhCnLocale} from './lang/zh-cn';
 import {deepmerge} from "../components/PageThemeUtils/deepmerge";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {createCache} from "../utils/createCache";
 
 /**
@@ -51,8 +51,8 @@ export const i18n = (() => {
   });
 
   const hooks = {
-    onChangeLang: createSyncHooks<() => void>(),
-    onUpdateLangs: createSyncHooks<() => void>()
+    onChangeLang: createHooks<() => void>(anonymousEffects),
+    onUpdateLangs: createHooks<() => void>(anonymousEffects)
   };
 
   /**
@@ -73,7 +73,7 @@ export const i18n = (() => {
     for (let i = 0, j = array.length; i < j; i++) {
       const property = array[i];
       let value = current[property];
-      if (i === j - 1) return !options ? value : formatLang(value, options);
+      if (i === j - 1) return !options ? value : formatLang(value, options)!;
       if (!value) return '';
       current = value;
     }

package/src/packages/i18n/lang/en-us.ts

@@ -29,7 +29,7 @@ export const EnUsLocale: tZhCnLocale = {
     main: 'Main',
     fixed: 'Fixed',
     hide: 'Hidden',
-    exportData: 'Export data',
+    exportData: 'Export Data',
     custom: 'Custom',
     setting: 'Setting',
     asc: 'Asc',
@@ -116,6 +116,13 @@ export const EnUsLocale: tZhCnLocale = {
       summary: 'Sum',
       save: 'Save',
       done: 'Done',
+      undo: 'Undo',
+      redo: 'Redo',
+      import: 'Import',
+      export: 'Export',
+      clear: 'Clear',
+      forward: 'Forward',
+      backward: 'Backward',
     },
     yes: 'YES',
     no: 'NO',
@@ -176,21 +183,22 @@ export const EnUsLocale: tZhCnLocale = {
     configSeniorFilter: 'Senior filter',
     formFilter: 'Form filter',
     formQuery: 'Form query',
+    aiButton: 'AI Chat',
     searchBar: 'Search bar',
     pleaseEditSearchParam: 'Please input search param directly',
-    allFilter: 'All filter',
+    allFilter: 'All Filter',
     noFilter: 'No filter',
     clearAll: 'Clear all',
     pleaseInputThConfigurationName: 'Please input configuration name',
     bak: 'Backup',
     areYouSureToOverrideTheConfiguration: 'Are you sure to override "{title}" to be the latest configuration',
-    cacheSetting: 'Cache setting',
+    cacheSetting: 'Cache Setting',
     clearFilterSortAndConfiguration: 'Clear filter, sort and configuration',
     withoutAnyConfiguration: 'Use none configuration',
     saveToNewConfiguration: 'Save current to be new configuration',
     cacheName: 'Cache name',
     createTime: 'Create time',
-    customSetting: 'Custom setting',
+    customSetting: 'Custom Setting',
     title: 'Title',
     alignType: 'Align type',
     alignLeft: 'Left',
@@ -210,20 +218,21 @@ export const EnUsLocale: tZhCnLocale = {
     exportShowData: 'Export show data',
     fieldName: 'Field name',
     exportAgain: 'Export again',
-    importData: 'Import data',
+    importData: 'Import Data',
     pleaseEnterCompleteParamsForCondition: 'Please input complete param for the {invalidIndex} condition ',
-    seniorFilter: 'Senior filter',
+    seniorFilter: 'Senior Filter',
     pleaseAddFilterCondition: 'Please add filter condition',
-    seniorQuery: 'Senior query',
+    seniorQuery: 'Senior Query',
     ascOrDesc: 'Asc Or Desc',
-    formEdit: 'Form edit',
-    batchCreate: 'Batch create',
-    batchDelete: 'Batch delete',
-    batchEdit: 'Batch edit',
-    batchModify: 'Batch modify',
-    seniorSort: 'Senior sort',
+    formEdit: 'Form Edit',
+    batchCreate: 'Batch Create',
+    aiCreate: 'AI Create',
+    batchDelete: 'Batch Delete',
+    batchEdit: 'Batch Edit',
+    batchModify: 'Batch Modify',
+    seniorSort: 'Senior Sort',
     canNotDeleteUsingCache: 'Can not delete cache which is using',
-    columnFilter: 'Column filter',
+    columnFilter: 'Column Filter',
     distinctFilter: 'Distinct filter',
     filterTipInclude: '{field} includes {val}',
     clearDistinctFilter: 'Clear distinct filter',
@@ -316,4 +325,18 @@ export const EnUsLocale: tZhCnLocale = {
     searchHistory: 'Search History',
     favorite: 'Favorite'
   },
+  colorPicker: {
+    notSupportDropper: 'Your browser does not support color pickers. It is recommended to use Google Chrome',
+    exitDropperMode: 'Press the ESC key to close the color suction tube',
+  },
+  iconPicker: {
+    placeholder: 'Please select or input icon name',
+  },
+  ai: {
+    placeholder: 'Please enter the content to be sent to the AI, such as: Who are you?',
+    require: 'The content of the question cannot be empty',
+    tableAiPlaceholder: 'You can have a conversation with the AI to achieve the functions of querying, sorting, and configuring the list. For example, query the data with the number approximately equal to 129 and the creation time greater than the day before yesterday, sort it in descending order by the creation time first, and then in ascending order by the update time. Finally, adjust the width of the number field.',
+    formAiPlaceholder: 'Describe the data content you want to edit in one sentence.',
+    smartFilling: 'Smart Filling',
+  }
 };

package/src/packages/i18n/lang/zh-cn.ts

@@ -47,7 +47,7 @@ export const ZhCnLocale = {
     invalidAmount: '无效金额',
     province: '省',
     city: '市',
-    district: '区/县',
+    district: '区县',
     lookUp: '查看',
     operation: '操作',
     noFilter: '暂无筛选',
@@ -114,6 +114,13 @@ export const ZhCnLocale = {
       summary: '合计',
       save: '保存',
       done: '完成',
+      undo: '撤销',
+      redo: '重做',
+      import: '导入',
+      export: '导出',
+      clear: '清空',
+      forward: '前移',
+      backward: '后移',
     },
     yes: '是',
     no: '否',
@@ -174,6 +181,7 @@ export const ZhCnLocale = {
     configSeniorFilter: '配置高级查询',
     formFilter: '表单筛选',
     formQuery: '表单查询',
+    aiButton: 'AI对话',
     searchBar: '搜索栏',
     pleaseEditSearchParam: '请直接编辑搜索栏筛选参数',
     allFilter: '所有筛选',
@@ -216,6 +224,7 @@ export const ZhCnLocale = {
     ascOrDesc: '升序还是降序',
     formEdit: '表单编辑',
     batchCreate: '批量新建',
+    aiCreate: '智能新建',
     batchDelete: '批量删除',
     batchEdit: '批量编辑',
     batchModify: '批量修改',
@@ -314,6 +323,20 @@ export const ZhCnLocale = {
     searchHistory: '搜索历史',
     favorite: '收藏'
   },
+  colorPicker: {
+    notSupportDropper: '您的浏览器不支持颜色拾取器，推荐使用谷歌浏览器',
+    exitDropperMode: '按 ESC 键关闭取色吸管',
+  },
+  iconPicker: {
+    placeholder: '请选择或者输入图标',
+  },
+  ai: {
+    placeholder: '请输入要发送给ai的内容如：你是谁',
+    require: '提问的内容不能为空',
+    tableAiPlaceholder: '你可以与ai对话实现对列表的查询、排序以及配置功能；比如：查询编号约等于129，创建时间大于前天的数据，先按照创建时间降序，再按照更新时间升序排序；最后是调宽编号字段的宽度',
+    formAiPlaceholder: '一句话描述你要编辑的数据内容',
+    smartFilling: '智能填写',
+  }
 } as const;
 
 type ZhCnLocaleUtils<T> = { [k in keyof T]: T[k] extends string ? string : ZhCnLocaleUtils<T[k]> }

package/src/packages/styles/application/application.public.scss

@@ -6,3 +6,10 @@
     transition: none !important;
   }
 }
+
+@include comp(theme-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: plv(text-1);
+}

package/src/packages/styles/global.import.scss

@@ -57,6 +57,7 @@
 @mixin hover($component) {
   &:not(.#{$component}-disabled):not(.#{$component}-loading):not(.#{$component}-readonly):not(.#{$component}-focus) {
     &:hover, &.#{$component}-hover {
+      z-index: 2;
       @content;
     }
   }
@@ -99,21 +100,65 @@
       }
       @content;
 
-      &.mt{margin-top: $margin}
-      &.mb{margin-bottom: $margin}
-      &.ml{margin-left: $margin}
-      &.mr{margin-right: $margin}
-      &.mx{margin-left: $margin;margin-right: $margin}
-      &.my{margin-top: $margin;margin-bottom: $margin}
-      &.margin {margin: $margin}
-
-      &.pt{padding-top: $margin}
-      &.pb{padding-bottom: $margin}
-      &.pl{padding-left: $margin}
-      &.pr{padding-right: $margin}
-      &.px{padding-left: $margin;padding-right: $margin}
-      &.py{padding-top: $margin;padding-bottom: $margin}
-      &.padding {padding: $margin}
+      &.mt {
+        margin-top: $margin
+      }
+
+      &.mb {
+        margin-bottom: $margin
+      }
+
+      &.ml {
+        margin-left: $margin
+      }
+
+      &.mr {
+        margin-right: $margin
+      }
+
+      &.mx {
+        margin-left: $margin;
+        margin-right: $margin
+      }
+
+      &.my {
+        margin-top: $margin;
+        margin-bottom: $margin
+      }
+
+      &.margin {
+        margin: $margin
+      }
+
+      &.pt {
+        padding-top: $margin
+      }
+
+      &.pb {
+        padding-bottom: $margin
+      }
+
+      &.pl {
+        padding-left: $margin
+      }
+
+      &.pr {
+        padding-right: $margin
+      }
+
+      &.px {
+        padding-left: $margin;
+        padding-right: $margin
+      }
+
+      &.py {
+        padding-top: $margin;
+        padding-bottom: $margin
+      }
+
+      &.padding {
+        padding: $margin
+      }
     }
   }
 }

package/src/packages/uses/createInputPopperAttrs.ts

@@ -1,4 +1,4 @@
-import {computed, reactive, useModel} from "plain-design-composition";
+import {computed, reactive, useModel} from "@peryl/react-compose";
 
 export function createInputPopperAttrs<T>(
   {
@@ -8,10 +8,11 @@ export function createInputPopperAttrs<T>(
     emit,
     popper,
     disableHideOnBlur,
+    handleInputChange,
   }: {
     getValue: () => T,
     emitChange: (val: T) => void,
-    isValidInputValue: (val: any) => boolean,
+    isValidInputValue?: (val: any) => boolean,
     emit: {
       onFocus: (e: FocusEvent) => void,
       onBlur: (e: FocusEvent) => void,
@@ -24,6 +25,7 @@ export function createInputPopperAttrs<T>(
       },
     },
     disableHideOnBlur?: boolean,
+    handleInputChange?: (val: string | null | undefined) => void,
   }) {
 
   const model = useModel(getValue, emitChange, { onChange: (val: any) => {state.inputValue = val;} });
@@ -33,9 +35,14 @@ export function createInputPopperAttrs<T>(
   const handler = {
     onInputChange: (val: any) => {
       state.inputValue = val;
-      if (isValidInputValue(val)) {
+      if (!isValidInputValue) {
         model.value = val;
+      } else {
+        if (isValidInputValue(val)) {
+          model.value = val;
+        }
       }
+      handleInputChange?.(val);
     },
     onInputFocus: (e: FocusEvent) => {emit.onFocus(e);},
     onInputBlur: (e: FocusEvent) => {

package/src/packages/uses/useCollapseStyles.tsx

@@ -1,5 +1,5 @@
-import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {computed, iTransitionEvent, reactive, StyleProperties, useStyleCache, watch} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 
 export function useCollapseStyles(
   {

package/src/packages/uses/useDragHorizontalScroll.ts

@@ -1,6 +1,5 @@
-import {createEffects} from "plain-utils/utils/createEffects";
 import {ClientZoom} from "../utils/ClientZoom";
-import {watch} from "plain-design-composition";
+import {createEffectsOfReaction} from "@peryl/react-compose";
 
 export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
 
@@ -17,7 +16,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     }
   };
 
-  const { effects } = createEffects();
+  const { effects, effectWatch } = createEffectsOfReaction();
 
   const handler = {
     mousedown: (e: MouseEvent) => {
@@ -60,7 +59,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     },
   };
 
-  effects.push(watch(() => getEl(), el => {
+  effectWatch(() => getEl(), el => {
     if (!!staticState.el) {
       staticState.el.removeEventListener('mousedown', handler.mousedown);
       staticState.el.removeEventListener('wheel', handler.onWheel);
@@ -69,7 +68,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
     if (!staticState.el) {return;}
     staticState.el.addEventListener('mousedown', handler.mousedown);
     staticState.el.addEventListener('wheel', handler.onWheel);
-  }));
+  });
 
   effects.push(() => {
     if (!!staticState.el) {

package/src/packages/uses/useEdit.ts

@@ -1,6 +1,8 @@
 import {useFunctionWrapper} from "./useFunctionWrapper";
-import {computed, inject, onBeforeUnmount, PropType, provide, reactive} from 'plain-design-composition';
+import {computed, inject, onBeforeUnmount, PropType, provide, reactive} from '@peryl/react-compose';
 import {eMultipleValueType} from "./useMultipleModel";
+import {PlainObject} from "@peryl/utils/event";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export const EDIT_PROVIDER = '@@EDIT_PROVIDER';
 
@@ -15,6 +17,7 @@ export const EditProps = {
 } as const;
 
 export interface EditProvideData {
+  editable: boolean | null,
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -28,11 +31,17 @@ export const useEdit = useFunctionWrapper(
   'edit',
   (ctx, option: { adjust?: (data: EditProvideData) => void | EditProvideData } = {}) => {
 
+    /*销毁时处理掉useEdit产生的副作用*/
+    const { effects } = createEffects();
+
     const parentEditComputed = inject(EDIT_PROVIDER, null) as null | { value: EditProvideData };
 
     const editState = reactive({ loading: null as null | boolean });
 
-    const editComputed = computed(() => {
+    const editComputed = computed((): EditProvideData => {
+
+      if (ctx.isDestroyed) {return {} as EditProvideData;}
+
       const {
         disabled,
         readonly,
@@ -40,7 +49,7 @@ export const useEdit = useFunctionWrapper(
         placeholder
       } = ctx.props as any as EditProvideData;
 
-      let data = { disabled, readonly, loading, placeholder };
+      let data: EditProvideData = { disabled, readonly, loading, placeholder, editable: false };
 
       if (data.disabled == null) data.disabled = !!parentEditComputed ? parentEditComputed.value.disabled : false;
       if (data.readonly == null) data.readonly = !!parentEditComputed ? parentEditComputed.value.readonly : false;
@@ -51,6 +60,11 @@ export const useEdit = useFunctionWrapper(
         data.loading = editState.loading;
       }
 
+      /*合并自身的onChange以及父edit的onChange*/
+      data.onChange = mergeHandlers({ methodName: 'onChange', parent: parentEditComputed?.value, self: data, });
+      /*合并自身的onBlur以及父edit的onBlur*/
+      data.onBlur = mergeHandlers({ methodName: 'onBlur', parent: parentEditComputed?.value, self: data, });
+
       if (!!option.adjust) data = option.adjust(data) || data;
 
       return {
@@ -58,25 +72,25 @@ export const useEdit = useFunctionWrapper(
         editable: !data.disabled && !data.readonly && !data.loading
       };
     });
+    effects.push(() => {editComputed.effect.stop();});
 
     provide(EDIT_PROVIDER, editComputed);
 
     const event = (ctx as any).event;
 
-    if (!!parentEditComputed) {
-      if (!!parentEditComputed.value.onBlur && !!event && !!event.on.onBlur) {
-        event.on.onBlur(parentEditComputed.value.onBlur);
-        onBeforeUnmount(() => event.off.onBlur(parentEditComputed.value.onBlur!));
-      }
-      if (!!parentEditComputed.value.onChange && !!event && !!event.on.onChange) {
-        event.on.onChange(parentEditComputed.value.onChange);
-        onBeforeUnmount(() => event.off.onChange(parentEditComputed.value.onChange!));
-      }
+    /*处理onBlur事件传递*/
+    if (event.on.onBlur && !!editComputed.value.onBlur) {
+      event.on.onBlur(editComputed.value.onBlur);
+      effects.push(() => event.off.onBlur(editComputed.value.onBlur));
     }
 
-    onBeforeUnmount(() => {
-      editComputed.effect.stop();
-    });
+    /*处理onChange传递*/
+    if (event.on.onChange && !!editComputed.value.onChange) {
+      event.on.onChange(editComputed.value.onChange);
+      effects.push(() => event.off.onChange(editComputed.value.onChange));
+    }
+
+    onBeforeUnmount(effects.clear);
 
     return {
       editState,
@@ -87,3 +101,16 @@ export const useEdit = useFunctionWrapper(
 export type tEditControl = ReturnType<typeof useEdit>
 
 export type tEditComputed = tEditControl["editComputed"]
+
+const mergeHandlers = ({ methodName, parent, self }: { methodName: string, parent: PlainObject | undefined, self: PlainObject }) => {
+  if (parent?.[methodName] || self[methodName]) {
+    const selfOnChange = self[methodName];
+    const parentOnChange = parent?.[methodName];
+    return (...args: any[]) => {
+      // console.log({ args, methodName, parentOnChange, selfOnChange });
+      selfOnChange?.(...args);
+      parentOnChange?.(...args);
+    };
+  }
+  return undefined;
+};

package/src/packages/uses/useFocusHandler.ts

@@ -1,5 +1,6 @@
-import {reactive, watchEffect} from "plain-design-composition";
-import {toArray} from 'plain-utils/utils/toArray';
+import {globalWatchEffect, onBeforeUnmount, reactive} from "@peryl/react-compose";
+import {toArray} from '@peryl/utils/toArray';
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 得到元素(input,textarea,editable div,button)的focus状态，如果是多个元素，则元素在失去焦点之后的100ms之后才会派发blur事件，否则期间任何一个元素获取焦点，都会取消派发blur事件这个动作
@@ -10,19 +11,26 @@ export function useFocusHandler(
   {
     getEls,
     onFocus,
-    onBlur
+    onBlur,
+    effects: setupEffects
   }: {
     getEls: () => (HTMLElement | null | undefined) | (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => void,
     onBlur: (e: FocusEvent) => void,
+    effects?: iEffects,
   }
 ) {
 
+  if (!setupEffects) {
+    setupEffects = createEffects().effects;
+    onBeforeUnmount(() => setupEffects!.clear());
+  }
+
   const isFocus = reactive({ value: false });
+
   let blurTimer: any = null;
 
   const handler = {
-    elements: [] as (HTMLElement | null | undefined)[],
     onFocus: (e: FocusEvent) => {
       if (!!blurTimer) {
         clearTimeout(blurTimer);
@@ -41,20 +49,25 @@ export function useFocusHandler(
     },
   };
 
-  watchEffect(() => {
-    handler.elements.forEach(el => {
-      if (!el) {return;}
-      el.removeEventListener('focus', handler.onFocus);
-      el.removeEventListener('blur', handler.onBlur);
-    });
-    handler.elements = toArray(getEls());
-    handler.elements.forEach(el => {
+  const { effects } = createEffects();
+
+  setupEffects.push(globalWatchEffect(() => {
+    effects.clear();
+
+    const elements = toArray(getEls());
+    elements.forEach(el => {
       if (!el) {return;}
       el.addEventListener('focus', handler.onFocus);
       el.addEventListener('blur', handler.onBlur);
     });
+    effects.push(() => elements.forEach(el => {
+      if (!el) {return;}
+      el.removeEventListener('focus', handler.onFocus);
+      el.removeEventListener('blur', handler.onBlur);
+    }));
+  }));
 
-  });
+  setupEffects.push(() => effects.clear());
 
   return { isFocus };
 }

package/src/packages/uses/useFunctionWrapper.ts

@@ -1,4 +1,5 @@
-import {getCurrentDesignInstance} from 'plain-design-composition';
+import {getCurrentDesignInstance, onBeforeUnmount} from '@peryl/react-compose';
+import {delay} from "@peryl/utils/delay";
 
 type Shift<T> = T extends [infer L, ...infer R] ? R : T
 
@@ -9,6 +10,7 @@ export function useFunctionWrapper<T extends (ctx: any, ...args: any[]) => any>(
   return (...args) => {
     const ctx = getCurrentDesignInstance() as any;
     if (!ctx._use) ctx._use = {};
+    onBeforeUnmount(() => delay().then(() => {delete ctx._use;}));
 
     if (!!ctx._use[key]) {
       throw new Error(`use ${key} can only be executed once!`);

package/src/packages/uses/useMultipleModel.tsx

@@ -1,6 +1,7 @@
-import {UseModelConfig} from "plain-design-composition/src/use/useModel";
-import {useModel} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {UseModelConfig} from "@peryl/react-compose/src/use/useModel";
+import {useModel} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
+import {iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 多选的时候值的类型
@@ -23,6 +24,7 @@ export function useMultipleModel<T>(
   emitter: (val: T) => void,
   props: { valueType?: typeof eMultipleValueType.TYPE, multiple?: boolean },
   config?: UseModelConfig<T>,
+  effects?: iEffects
 ) {
 
   /*最后一次emit的值*/
@@ -59,5 +61,5 @@ export function useMultipleModel<T>(
       }
       emitter(val);
     }
-  }, config);
+  }, config, effects);
 }

package/src/packages/uses/useRenderReference.tsx

@@ -1,4 +1,4 @@
-import {reactive, RenderNode} from "plain-design-composition";
+import {reactive, RenderNode} from "@peryl/react-compose";
 import {Reference} from "../components/Reference";
 
 /**

package/src/packages/uses/useStyle.tsx

@@ -1,6 +1,6 @@
-import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "@peryl/react-compose";
 import {useFunctionWrapper} from "./useFunctionWrapper";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
 
 /**
@@ -47,6 +47,8 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
   const parent = inject(USE_STYLE_PROVIDER, null) as null | { value: UseStyleProvideData };
 
   const styleComputed = computed(() => {
+    if (ctx.isDestroyed) {return {} as UseStyleProvideData;}
+
     const defaultData = Object.assign({ shape: applicationConfiguration.value.default.shape, size: applicationConfiguration.value.default.size, inputMode: applicationConfiguration.value.default.inputMode }, option);
 
     const { shape, size, status, inputMode } = ctx.props;
@@ -70,8 +72,6 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   onBeforeUnmount(() => {
     setTimeout(() => {
-      (styleComputed.value as any).ctx = null;
-      (styleComputed.value as any).parent = null;
       styleComputed.effect.stop();
     });
   });

package/src/packages/utils/ClientZoom.ts

@@ -1,4 +1,4 @@
-import {iMouseEvent} from 'plain-design-composition';
+import {iMouseEvent} from '@peryl/react-compose';
 
 export const ClientZoom = (() => {
   let zoom: '' | number = '';

package/src/packages/utils/FixInput.ts

@@ -1,3 +1,3 @@
-import {fixInputCursor} from "plain-design-composition";
+import {fixInputCursor} from "@peryl/react-compose";
 
 export const FixInput = fixInputCursor('input')

package/src/packages/utils/InnerTransition.ts

@@ -1,5 +1,5 @@
-import {addClass} from "plain-utils/dom/addClass";
-import {removeClass} from "plain-utils/dom/removeClass";
+import {addClass} from "@peryl/utils/addClass";
+import {removeClass} from "@peryl/utils/removeClass";
 
 const cls = "plain-disable-inner-transition";
 

package/src/packages/utils/LoadingText.ts

@@ -1,4 +1,4 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 
 export const LoadingText = reactive({ value: '...' });