plain-design 1.0.0-beta.111 → 1.0.0-beta.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.111",
+  "version": "1.0.0-beta.113",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -45,7 +45,7 @@
     "@babel/preset-env": "7.23.7",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@peryl/react-compose": "0.0.204",
+    "@peryl/react-compose": "0.0.205",
     "@types/classnames": "^2.2.11",
     "@types/react": "18.2.4",
     "@types/react-dom": "18.2.4",

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

@@ -12,6 +12,7 @@ import {tStyleComputed} from "../../uses/useStyle";
 import {getTableRowHeight} from "../Table/table/utils/table.utils";
 import {PlcIndex} from "../Table/standard/PlcIndex";
 import {createPopupEditor} from "../usePopupEditor";
+import {tEditControl} from "../../uses/useEdit";
 
 export function createCascadePopper(
   {
@@ -31,7 +32,7 @@ export function createCascadePopper(
     getPublicPopperAttrs: () => any,
     onPopperClose: () => void,
     onPopperShow?: () => void,
-    editControl: { editComputed: { value: { editable: boolean } } }
+    editControl: tEditControl
     refs: { input: typeof Input.use.class | null | undefined },
     scopeSlots: any,
     getTreeAttrs: () => any,

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -25,6 +25,7 @@ export const RenderPlcTreeNode = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLDivElement });
 
     const isLeaf = computed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
 
@@ -63,7 +64,7 @@ export const RenderPlcTreeNode = designComponent({
 
     return () => {
       const { treeNode, tableNode } = props;
-      const { leafIcon, folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
+      const { folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
       return (
         <div className={getComponentCls('plc-tree-node')} ref={onRef.el}>
           <div className="tree-node-operator">
@@ -74,7 +75,7 @@ export const RenderPlcTreeNode = designComponent({
               {treeNode.isLoading() ?
                 <Loading type="gamma"/> :
                 <Icon
-                  icon={isLeaf.value || treeNode.empty ? leafIcon : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
+                  icon={isLeaf.value || treeNode.empty ? leafIcon.value : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
                 />}
             </div>
             {props.treeCore.props.multiple && (

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -44,6 +44,7 @@ export const RenderTreeNode = designComponent({
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
     const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
 
     const connectorClassesList = computed(() => {
 
@@ -124,7 +125,7 @@ export const RenderTreeNode = designComponent({
               props.treeNode.isLoading() ?
                 <Loading type="gamma"/> :
                 <Icon
-                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? tree.props.leafIcon : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
+                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? leafIcon.value : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
                 />
             }
           </div>

package/src/packages/components/TreeCore/TreeCore.type.tsx

@@ -70,7 +70,7 @@ export interface iTreeProps {
   /*判断节点是否可以放置*/
   isAllowDroppable?: (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => boolean | void,
   /*叶子节点图标*/
-  leafIcon: string,
+  leafIcon: string | ((treeNode: iTreeNode) => string),
   /*节点收起时显示图标*/
   folderCollapseIcon: string,
   /*节点展开时显示的图标*/

package/src/packages/components/TreeCore/createTreeNode.tsx

@@ -112,6 +112,8 @@ export function createTreeNode(
     /*默认情况下，没有设置isLeaf来判断节点是否为叶子节点的话，则判断是否存在有子节点数据来判断是否为叶子节点，如果子节点数据是一个空数组也视为非叶子节点*/
     return !props.isLeaf ? !childrenData() : props.isLeaf(data);
   };
+  /*叶子节点的图标*/
+  const leafIcon = () => {return typeof props.leafIcon === "string" ? props.leafIcon : props.leafIcon(data);};
   /*是否已经选中*/
   const checkStatus = (): typeof CheckboxStatus.TYPE => getCheckStatus()[key];
   /*是否可选中*/
@@ -194,6 +196,7 @@ export function createTreeNode(
     setChildrenData,
     children,
     isLeaf,
+    leafIcon,
     checkStatus,
     isCheckAble,
     isExpanded,
@@ -225,6 +228,7 @@ export interface iTreeNode {
   setChildrenData: (childrenData: any[] | null | undefined) => void,      // 设置节点子数据
   children: () => iTreeNode[],                                            // 子节点
   isLeaf: () => boolean,                                                  // 节点是否为叶子节点
+  leafIcon: () => string,                                                 // 叶子节点的图标
   checkStatus: () => typeof CheckboxStatus.TYPE,                          // 节点的选中状态，check选中，uncheck未选中，minus半选
   isCheckAble: () => boolean,                                             // 节点是否可以选中
   isExpanded: () => boolean,                                              // 节点是否已经展开

package/src/packages/uses/useEdit.ts

@@ -15,6 +15,7 @@ export const EditProps = {
 } as const;
 
 export interface EditProvideData {
+  editable: boolean | null,
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -32,7 +33,10 @@ export const useEdit = useFunctionWrapper(
 
     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 +44,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;

package/src/packages/uses/useStyle.tsx

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