plain-design 1.0.0-beta.76 → 1.0.0-beta.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.78",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$address/createAddressService.tsx

@@ -1,6 +1,7 @@
 import {eAddressTypeEnum, iAddressLazyMeta, iAddressSyncMeta} from "./address.utils";
 import {defer, DFD} from "plain-utils/utils/defer";
 import {reactive} from "plain-design-composition";
+import i18n from "../i18n";
 
 export function createAddressService(
   config: {
@@ -126,13 +127,14 @@ export function createAddressService(
     };
   })();
 
+  let dfd: DFD<iAddressSyncMeta[]> | null = null;
+
   /**
    * 带缓存地查询所有地址数据
    * @author  韦胜健
    * @date    2022.12.16 23:20
    */
   const getAddress = (() => {
-    let dfd: DFD<iAddressSyncMeta[]> | null = null;
     return () => {
       if (!dfd) {
         dfd = defer<iAddressSyncMeta[]>();
@@ -142,6 +144,15 @@ export function createAddressService(
     };
   })();
 
+  /**
+   * 清理缓存
+   * @author  韦胜健
+   * @date    2024.6.18 15:34
+   */
+  const clear = () => {
+    dfd = null;
+  };
+
   const getAddressByCodesComputed = (() => {
 
     const state = reactive({
@@ -171,6 +182,13 @@ export function createAddressService(
     return getter;
   })();
 
+  /**
+   * 切换多语言的时候清理缓存
+   * @author  韦胜健
+   * @date    2024.6.18 15:35
+   */
+  i18n.hooks.onChangeLang.use(() => clear());
+
   return {
     config,
     getAddressByLabel,
@@ -178,6 +196,7 @@ export function createAddressService(
     getAddressByParentCodes,
     getAddress,
     getAddressByCodesComputed,
+    clear,
   };
 }
 

package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx

@@ -35,6 +35,7 @@ export function createAddressCascadeMultiple(
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={state.modelMetas}

package/src/packages/components/AddressCascade/createAddressCascade.single.tsx

@@ -58,6 +58,7 @@ export function createAddressCascadeSingle(
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={metaArray.value}

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

@@ -8,6 +8,7 @@ import {createAddressCascadeHooks} from "./createAddressCascade.hooks";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createAddressCascadeMultiple} from "./createAddressCascade.multiple";
 import {createAddressCascadeSingle} from "./createAddressCascade.single";
+import {useEdit} from "../../uses/useEdit";
 
 export const AddressCascade = designComponent({
   name: 'address-cascade',
@@ -17,6 +18,7 @@ export const AddressCascade = designComponent({
   setup({ props, event }) {
 
     useStyle();
+    useEdit();
 
     const hooks = createAddressCascadeHooks();
 

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -94,6 +94,7 @@ export function createSingleCascadeRender(
       ref={onRef.input}
       className={classes.value}
       suffixIcon="pi-mind-mapping"
+      customReadonly={props.disableFilter || props.lazy}
       {...mergeAttrs(
         { class: classes.value, },
         {
@@ -107,7 +108,6 @@ export function createSingleCascadeRender(
             }
         }
       )}
-      customReadonly={props.disableFilter || props.lazy}
     />
   )));
 

package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss

@@ -55,6 +55,7 @@
       cursor: pointer;
       transition: background-color linear 300ms;
       border-radius: plv(box-size-small-border-radius);
+      word-break: break-all;
 
       @include comp(checkbox) {
         line-height: 1.4em;

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "plain-design-composition";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
@@ -109,7 +109,7 @@ export const FormItem = designComponent({
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
             <div className="form-item-content-inner">
-              {slots.default()}
+              <Fragment key="slot_default">{slots.default()}</Fragment>
               {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
               {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
@@ -134,7 +134,7 @@ export const Input = designComponent({
             {content}
 
             {inputSuffixIcon.render()}
-            {hooks.onRenderSuffix.exec(slots.suffix())}
+            {hooks.onRenderSuffix.exec(<Fragment key="slot_suffix">{slots.suffix()}</Fragment>)}
           </span>
         );
       },

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -133,13 +133,19 @@ export const PlcExpand = designComponent({
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
+    const weakMap = new WeakMap<PlainObject, (param: any) => any>();
     onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
       const newData = [] as any[];
       data.forEach(item => {
         newData.push(item);
         if (typeof item === "function") {return;}
         if (utils.isExpand(item.data)) {
-          newData.push((param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index));
+          let dataFunc = weakMap.get(item.data);
+          if (!dataFunc) {
+            dataFunc = (param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index);
+            weakMap.set(item.data, dataFunc);
+          }
+          newData.push(dataFunc);
         }
       });
       return { data: newData };

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -75,12 +75,26 @@ export function useVirtualList(
     hostSize: null as null | number,              // 容器高度
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
     id2size: {} as Record<string, number | undefined>,
-    avgSize: props.size
+  });
+
+  const _avgSize = computed((): number => {
+    const total = Object.values(state.id2size).reduce((prev, item) => {
+      if (item != null) {
+        prev.total += item;
+        prev.count++;
+      }
+      return prev;
+    }, { total: 0, count: 0 });
+    if (!!total.count) {
+      return Math.floor(total.total / total.count);
+    } else {
+      return props.size;
+    }
   });
 
   const _pageSize = computed(() => {
     if (state.hostSize == null) {return null;}
-    return Math.floor(state.hostSize / (state.avgSize == null ? props.size : state.avgSize));
+    return Math.floor(state.hostSize / _avgSize.value);
   });
 
   const idMap = new WeakMap<PlainObject, string>();
@@ -94,7 +108,7 @@ export function useVirtualList(
         id = nextRowId();
         idMap.set(item, id);
       }
-      const size: number = state.id2size[id] || state.avgSize;
+      const size: number = state.id2size[id] || _avgSize.value;
       let start = prevEnd;
       let end = start + size;
       prevEnd = end;
@@ -120,7 +134,7 @@ export function useVirtualList(
         startPageIndex: 0,
       };
     }
-    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue, pageSize);
+    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue);
     return {
       list: nodes.value.slice(startIndex, endIndex),
       startPageIndex: pageIndex,
@@ -264,10 +278,11 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollValue: number, pageSize: number | null | undefined) => {
+    getPageIndex: (scrollValue: number) => {
       if (scrollValue < 0) {
         scrollValue = 0;
       }
+      const pageSize = _pageSize.value;
       const data = dataModel.value || [];
       if (pageSize == null) {
         return {
@@ -322,18 +337,15 @@ export function useVirtualList(
       };
     },
     resetHostSize: () => {
-      let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
-      const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
-      if (!!headEl) {
-        hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
-      if (!!footEl) {
-        hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
-      if (state.hostSize != hostSize) {
-        state.hostSize = hostSize;
-      }
+      const hostEl = refs.scroll?.refs.host;
+      if (!hostEl) {return;}
+      let hostSize = hostEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      const headEl = hostEl.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
+      const footEl = hostEl.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
+      if (!!headEl) {hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
+      if (!!footEl) {hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
+
+      if (state.hostSize != hostSize) {state.hostSize = hostSize;}
     },
   };
 
@@ -348,7 +360,7 @@ export function useVirtualList(
       const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
       freezeState.scrollValue = newScrollValue;
-      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, _pageSize.value);
+      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop);
       state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       freezeState.current = current;
       emit.onPageIndexChange(current);
@@ -387,7 +399,6 @@ export function useVirtualList(
     await delay();
     // console.log('dynamic scan height')
     const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
-    let newAvgSize = state.avgSize;
 
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
@@ -398,13 +409,8 @@ export function useVirtualList(
       }
       if (state.id2size[vid] != size) {
         state.id2size[vid] = size;
-        newAvgSize = Number(((state.avgSize + size) / 2).toFixed(0));
       }
     }
-
-    if (newAvgSize != state.avgSize) {
-      state.avgSize = newAvgSize;
-    }
   });
 
   return {