plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,208 +1,208 @@
-import {computed, designComponent, getComponentCls, onBeforeUnmount, onMounted, useClasses, useStyles} from "@peryl/react-compose";
-import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
-import {createTreeCore} from "../TreeCore/createTreeCore";
-import {iTreeNode} from "../TreeCore/createTreeNode";
-import {CascadeListPanelItem} from "./list/CascadeListPanelItem";
-import {unit} from "@peryl/utils/unit";
-import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
-import {Empty} from "../Empty";
-import {CascadePanelCustomPropsOption, eCascadePanelType, iCascadePanelMeta} from "./cascade-panel.utils";
-import {createCascadeListRender} from "./list/createCascadeListRender";
-import {createCascadeFlatRender} from "./flat/createCascadeFlatRender";
-import {LoadingMask} from "../LoadingMask";
-import {StyleProps, useStyle} from "../../uses/useStyle";
-import {iEffects} from "@peryl/utils/createEffects";
-
-export const CascadePanel = designComponent({
-  name: 'cascade-panel',
-  provideRefer: true,
-  props: {
-    ...StyleProps,
-    modelValue: {},
-    height: {},
-    ...CascadePanelCustomPropsOption,
-    ...TreePropsOptions,
-  },
-  emits: {
-    ...TreeEmitOptions,
-  },
-  slots: TreeSlotsOption,
-  scopeSlots: TreeScopeSlotsOption,
-  setup({ props, event, slots, scopeSlots }) {
-
-    const { styleComputed } = useStyle();
-
-    /**
-     * 树核心逻辑
-     * @author  韦胜健
-     * @date    2022/10/27 9:33
-     */
-    const treeCore = createTreeCore({ props, event });
-
-    /**
-     * 根节点样式
-     * @author  韦胜健
-     * @date    2022/10/27 10:51
-     */
-    const classes = useClasses(() => [getComponentCls('cascade-panel'), `cascade-panel-size-${styleComputed.value.size}`]);
-
-    /**
-     * 根节点内联样式
-     * @author  韦胜健
-     * @date    2022/10/27 10:51
-     */
-    const styles = useStyles(styles => {styles.height = unit(props.height as any);});
-
-    const handler = {
-      /**
-       * 处理点击节点动作
-       * @author  韦胜健
-       * @date    2022/10/27 16:48
-       */
-      handleClickNode: async ({ treeNodes, treeNode }: { treeNode: iTreeNode, treeNodes: iTreeNode[] | null, index: number }) => {
-        if (treeNode.isLeaf()) {
-          /*如果是叶子节点，则触发选中节点动作*/
-          treeCore.methods.singleSelect(treeNode);
-          return;
-        }
-        /*---------------------------------------展开节点-------------------------------------------*/
-        if (treeNode.isExpanded() || !treeNodes) {return;}
-        const nestExpandNode = treeNodes.find(i => i.isExpanded());
-        /*关掉已经打开的兄弟节点*/
-        if (!!nestExpandNode) {
-          if (nestExpandNode.id !== treeNode.id) {
-            await treeCore.methods.collapse(nestExpandNode);
-          }
-        }
-        await treeCore.methods.expand(treeNode);
-      },
-    };
-
-    /**
-     * 要渲染的面板数据
-     * @author  韦胜健
-     * @date    2022/10/27 16:47
-     */
-    const panels = computed((): iCascadePanelMeta[] => {
-      const panels: { parent: iTreeNode | null, treeNodes: iTreeNode[] }[] = [];
-
-      function addPanel(parent: iTreeNode | null, treeNodes: iTreeNode[]) {
-        panels.push({ parent, treeNodes });
-        const expandNode = treeNodes.find(i => i.isExpanded());
-        if (!!expandNode) {
-          addPanel(expandNode, expandNode.children());
-        }
-      }
-
-      addPanel(null, treeCore.treeNodeComputedData.value.treeNodeList);
-      return panels;
-    });
-
-    /**
-     * 筛选面板
-     * @author  韦胜健
-     * @date    2022.12.12 20:54
-     */
-    const filterPanel = (() => {
-      const treeNodes = computed(() => {
-        const result: iTreeNode[] = [];
-
-        function addNode(treeNodes: iTreeNode[]) {
-          treeNodes.forEach(treeNode => {
-            if (treeNode.isMatchSearch() || treeNode.parents().some(i => i.isMatchSearch()) || treeNode.isPassFilter()) {
-              if (
-                !treeNode.empty &&
-                (!treeCore.state.singleCheckType.checkLast || treeNode.isLeaf())
-              ) {
-                result.push(treeNode);
-              }
-            }
-            if (!treeNode.isLeaf()) {
-              addNode(treeNode.children());
-            }
-          });
-        }
-
-        addNode(treeCore.treeNodeComputedData.value.treeNodeList);
-        return result;
-      });
-      const nodeSlots = {
-        label: ({ treeNode }: { treeNode: iTreeNode, index: number }) => {
-          const treeNodes = [...treeNode.parents().reverse(), treeNode];
-          return treeNodes.map((i, index) => [
-            scopeSlots.default({ treeNode: i, index }, i.label()),
-            index === treeNodes.length - 1 ? null : ' / '
-          ].filter(Boolean));
-        }
-      };
-      const render = () => (
-        <CascadeListPanelItem
-          style={{ width: props.virtual ? unit(props.filterPanelWidth || (props.panelWidth || 100) * 3) : undefined }}
-          key="filter"
-          treeNodes={treeNodes.value}
-          autoScroll={false}
-          nodeAttrs={{ noArrow: true }}
-          nodeSlots={nodeSlots}
-          handleClickNode={handler.handleClickNode}
-        >
-          {{ noData: () => <Empty noMatch label={props.noMatchText}/>, }}
-        </CascadeListPanelItem>
-      );
-      return { render };
-    })();
-
-    /**
-     * 渲染内容
-     * @author  韦胜健
-     * @date    2022.12.12 21:18
-     */
-    let contentCache: undefined | { type: typeof eCascadePanelType.TYPE, effects: iEffects, render: () => any } = undefined;
-    const content = computed(() => {
-
-      const param = { props, handleClickNode: handler.handleClickNode, panels, treeCore };
-      const { panelType } = props;
-
-      if (!!contentCache && contentCache.type === panelType) {return { render: contentCache.render };}
-
-      contentCache?.effects.clear();
-      contentCache = {
-        type: panelType,
-        ...panelType === eCascadePanelType.cascade ? createCascadeListRender(param) : createCascadeFlatRender(param)
-      };
-      return { render: contentCache.render };
-    });
-
-    onMounted(() => {
-      props.panelType === 'cascade' && !props.multiple && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
-      treeCore.hooks.onMounted.exec(undefined);
-    });
-    onBeforeUnmount(() => {
-      if (!!contentCache) {
-        contentCache.effects.clear();
-        contentCache = undefined;
-      }
-    });
-
-    return {
-      refer: {
-        slots,
-        treeCore,
-        props,
-        scopeSlots,
-        styleComputed,
-      },
-      render: () => {
-        return (
-          <div className={classes.value} style={styles.value}>
-            {props.filterText != null && String(props.filterText).trim().length > 0 ? (
-              filterPanel.render()
-            ) : (
-              content.value.render()
-            )}
-            {treeCore.isLoading.isLoading && <LoadingMask modelValue={true}/>}
-          </div>
-        );
-      }
-    };
-  },
-});
+import {computed, designComponent, getComponentCls, onBeforeUnmount, onMounted, useClasses, useStyles} from "@peryl/react-compose";
+import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
+import {createTreeCore} from "../TreeCore/createTreeCore";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import {CascadeListPanelItem} from "./list/CascadeListPanelItem";
+import {unit} from "@peryl/utils/unit";
+import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
+import {Empty} from "../Empty";
+import {CascadePanelCustomPropsOption, eCascadePanelType, iCascadePanelMeta} from "./cascade-panel.utils";
+import {createCascadeListRender} from "./list/createCascadeListRender";
+import {createCascadeFlatRender} from "./flat/createCascadeFlatRender";
+import {LoadingMask} from "../LoadingMask";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {iEffects} from "@peryl/utils/createEffects";
+
+export const CascadePanel = designComponent({
+  name: 'cascade-panel',
+  provideRefer: true,
+  props: {
+    ...StyleProps,
+    modelValue: {},
+    height: {},
+    ...CascadePanelCustomPropsOption,
+    ...TreePropsOptions,
+  },
+  emits: {
+    ...TreeEmitOptions,
+  },
+  slots: TreeSlotsOption,
+  scopeSlots: TreeScopeSlotsOption,
+  setup({ props, event, slots, scopeSlots }) {
+
+    const { styleComputed } = useStyle();
+
+    /**
+     * 树核心逻辑
+     * @author  韦胜健
+     * @date    2022/10/27 9:33
+     */
+    const treeCore = createTreeCore({ props, event });
+
+    /**
+     * 根节点样式
+     * @author  韦胜健
+     * @date    2022/10/27 10:51
+     */
+    const classes = useClasses(() => [getComponentCls('cascade-panel'), `cascade-panel-size-${styleComputed.value.size}`]);
+
+    /**
+     * 根节点内联样式
+     * @author  韦胜健
+     * @date    2022/10/27 10:51
+     */
+    const styles = useStyles(styles => {styles.height = unit(props.height as any);});
+
+    const handler = {
+      /**
+       * 处理点击节点动作
+       * @author  韦胜健
+       * @date    2022/10/27 16:48
+       */
+      handleClickNode: async ({ treeNodes, treeNode }: { treeNode: iTreeNode, treeNodes: iTreeNode[] | null, index: number }) => {
+        if (treeNode.isLeaf()) {
+          /*如果是叶子节点，则触发选中节点动作*/
+          treeCore.methods.singleSelect(treeNode);
+          return;
+        }
+        /*---------------------------------------展开节点-------------------------------------------*/
+        if (treeNode.isExpanded() || !treeNodes) {return;}
+        const nestExpandNode = treeNodes.find(i => i.isExpanded());
+        /*关掉已经打开的兄弟节点*/
+        if (!!nestExpandNode) {
+          if (nestExpandNode.id !== treeNode.id) {
+            await treeCore.methods.collapse(nestExpandNode);
+          }
+        }
+        await treeCore.methods.expand(treeNode);
+      },
+    };
+
+    /**
+     * 要渲染的面板数据
+     * @author  韦胜健
+     * @date    2022/10/27 16:47
+     */
+    const panels = computed((): iCascadePanelMeta[] => {
+      const panels: { parent: iTreeNode | null, treeNodes: iTreeNode[] }[] = [];
+
+      function addPanel(parent: iTreeNode | null, treeNodes: iTreeNode[]) {
+        panels.push({ parent, treeNodes });
+        const expandNode = treeNodes.find(i => i.isExpanded());
+        if (!!expandNode) {
+          addPanel(expandNode, expandNode.children());
+        }
+      }
+
+      addPanel(null, treeCore.treeNodeComputedData.value.treeNodeList);
+      return panels;
+    });
+
+    /**
+     * 筛选面板
+     * @author  韦胜健
+     * @date    2022.12.12 20:54
+     */
+    const filterPanel = (() => {
+      const treeNodes = computed(() => {
+        const result: iTreeNode[] = [];
+
+        function addNode(treeNodes: iTreeNode[]) {
+          treeNodes.forEach(treeNode => {
+            if (treeNode.isMatchSearch() || treeNode.parents().some(i => i.isMatchSearch()) || treeNode.isPassFilter()) {
+              if (
+                !treeNode.empty &&
+                (!treeCore.state.singleCheckType.checkLast || treeNode.isLeaf())
+              ) {
+                result.push(treeNode);
+              }
+            }
+            if (!treeNode.isLeaf()) {
+              addNode(treeNode.children());
+            }
+          });
+        }
+
+        addNode(treeCore.treeNodeComputedData.value.treeNodeList);
+        return result;
+      });
+      const nodeSlots = {
+        label: ({ treeNode }: { treeNode: iTreeNode, index: number }) => {
+          const treeNodes = [...treeNode.parents().reverse(), treeNode];
+          return treeNodes.map((i, index) => [
+            scopeSlots.default({ treeNode: i, index }, i.label()),
+            index === treeNodes.length - 1 ? null : ' / '
+          ].filter(Boolean));
+        }
+      };
+      const render = () => (
+        <CascadeListPanelItem
+          style={{ width: props.virtual ? unit(props.filterPanelWidth || (props.panelWidth || 100) * 3) : undefined }}
+          key="filter"
+          treeNodes={treeNodes.value}
+          autoScroll={false}
+          nodeAttrs={{ noArrow: true }}
+          nodeSlots={nodeSlots}
+          handleClickNode={handler.handleClickNode}
+        >
+          {{ noData: () => <Empty noMatch label={props.noMatchText}/>, }}
+        </CascadeListPanelItem>
+      );
+      return { render };
+    })();
+
+    /**
+     * 渲染内容
+     * @author  韦胜健
+     * @date    2022.12.12 21:18
+     */
+    let contentCache: undefined | { type: typeof eCascadePanelType.TYPE, effects: iEffects, render: () => any } = undefined;
+    const content = computed(() => {
+
+      const param = { props, handleClickNode: handler.handleClickNode, panels, treeCore };
+      const { panelType } = props;
+
+      if (!!contentCache && contentCache.type === panelType) {return { render: contentCache.render };}
+
+      contentCache?.effects.clear();
+      contentCache = {
+        type: panelType,
+        ...panelType === eCascadePanelType.cascade ? createCascadeListRender(param) : createCascadeFlatRender(param)
+      };
+      return { render: contentCache.render };
+    });
+
+    onMounted(() => {
+      props.panelType === 'cascade' && !props.multiple && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
+      treeCore.hooks.onMounted.exec(undefined);
+    });
+    onBeforeUnmount(() => {
+      if (!!contentCache) {
+        contentCache.effects.clear();
+        contentCache = undefined;
+      }
+    });
+
+    return {
+      refer: {
+        slots,
+        treeCore,
+        props,
+        scopeSlots,
+        styleComputed,
+      },
+      render: () => {
+        return (
+          <div className={classes.value} style={styles.value}>
+            {props.filterText != null && String(props.filterText).trim().length > 0 ? (
+              filterPanel.render()
+            ) : (
+              content.value.render()
+            )}
+            {treeCore.isLoading.isLoading && <LoadingMask modelValue={true}/>}
+          </div>
+        );
+      }
+    };
+  },
+});

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -1,93 +1,93 @@
-import {designComponent, onMounted, useClasses, useRefs} from "@peryl/react-compose";
-import {iTreeNode} from "../../TreeCore/createTreeNode";
-import {CascadeListPanelNode} from "./CascadeListPanelNode";
-import {Scroll} from "../../Scroll";
-import {Empty} from "../../Empty";
-import {CascadePanel} from "../index";
-import {LoadingMask} from "../../LoadingMask";
-import {VirtualList} from "../../VirtualList";
-import {CascadePanelItemPropsOption} from "../cascade-panel.utils";
-
-export const CascadeListPanelItem = designComponent({
-  name: 'cascade-panel-item',
-  props: CascadePanelItemPropsOption,
-  slots: ['noData'],
-  setup({ props, event: { emit }, slots }) {
-
-    const panel = CascadePanel.use.inject();
-
-    const { refs, onRef } = useRefs({ scroll: Scroll });
-
-    const classes = useClasses(() => [
-      'cascade-panel-item',
-    ]);
-
-    onMounted(() => {
-      if (!!props.autoScroll) {
-        const checkNode = refs.scroll?.refs.content?.querySelector('.cascade-panel-node-checked');
-        if (!!checkNode) {
-          refs.scroll!.methods.scrollTop((checkNode as HTMLDivElement).offsetTop);
-        }
-      }
-    });
-
-    return () => (
-      <div className={classes.value}>
-        <div className="cascade-panel-item-inner">
-          {(() => {
-            if (!props.treeNodes || props.treeNodes.length === 0) {
-              return slots.noData(<Empty noData label={panel.props.noDataText}/>);
-            }
-            if (!panel.props.virtual) {
-              return (
-                <Scroll ref={onRef.scroll}>
-                  {props.treeNodes.map((treeNode, index) => (
-                    <CascadeListPanelNode
-                      treeNode={treeNode}
-                      treeNodes={props.treeNodes}
-                      index={index}
-                      key={index}
-                      handleClickNode={props.handleClickNode}
-                      {...props.nodeAttrs}
-                    >
-                      {(() => props.nodeSlots)()}
-                    </CascadeListPanelNode>
-                  ))}
-                </Scroll>
-              );
-            } else {
-              return (
-                <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
-                  {{
-                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
-                      <CascadeListPanelNode
-                        data-vid={vid}
-                        treeNode={treeNode}
-                        treeNodes={props.treeNodes}
-                        index={index}
-                        key={vIndex}
-                        handleClickNode={props.handleClickNode}
-                        {...props.nodeAttrs}
-                      >
-                        {(() => props.nodeSlots)()}
-                      </CascadeListPanelNode>
-                    )
-                  }}
-                </VirtualList>
-              );
-            }
-          })()}
-
-          {props.parent?.isLoading() && <LoadingMask modelValue={true}/>}
-        </div>
-      </div>
-    );
-  },
-});
-
-const CascadePanelVirtualSize = {
-  large: 33,
-  normal: 33,
-  small: 25,
-  mini: 25,
-};
+import {designComponent, onMounted, useClasses, useRefs} from "@peryl/react-compose";
+import {iTreeNode} from "../../TreeCore/createTreeNode";
+import {CascadeListPanelNode} from "./CascadeListPanelNode";
+import {Scroll} from "../../Scroll";
+import {Empty} from "../../Empty";
+import {CascadePanel} from "../index";
+import {LoadingMask} from "../../LoadingMask";
+import {VirtualList} from "../../VirtualList";
+import {CascadePanelItemPropsOption} from "../cascade-panel.utils";
+
+export const CascadeListPanelItem = designComponent({
+  name: 'cascade-panel-item',
+  props: CascadePanelItemPropsOption,
+  slots: ['noData'],
+  setup({ props, event: { emit }, slots }) {
+
+    const panel = CascadePanel.use.inject();
+
+    const { refs, onRef } = useRefs({ scroll: Scroll });
+
+    const classes = useClasses(() => [
+      'cascade-panel-item',
+    ]);
+
+    onMounted(() => {
+      if (!!props.autoScroll) {
+        const checkNode = refs.scroll?.refs.content?.querySelector('.cascade-panel-node-checked');
+        if (!!checkNode) {
+          refs.scroll!.methods.scrollTop((checkNode as HTMLDivElement).offsetTop);
+        }
+      }
+    });
+
+    return () => (
+      <div className={classes.value}>
+        <div className="cascade-panel-item-inner">
+          {(() => {
+            if (!props.treeNodes || props.treeNodes.length === 0) {
+              return slots.noData(<Empty noData label={panel.props.noDataText}/>);
+            }
+            if (!panel.props.virtual) {
+              return (
+                <Scroll ref={onRef.scroll}>
+                  {props.treeNodes.map((treeNode, index) => (
+                    <CascadeListPanelNode
+                      treeNode={treeNode}
+                      treeNodes={props.treeNodes}
+                      index={index}
+                      key={index}
+                      handleClickNode={props.handleClickNode}
+                      {...props.nodeAttrs}
+                    >
+                      {(() => props.nodeSlots)()}
+                    </CascadeListPanelNode>
+                  ))}
+                </Scroll>
+              );
+            } else {
+              return (
+                <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
+                  {{
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
+                      <CascadeListPanelNode
+                        data-vid={vid}
+                        treeNode={treeNode}
+                        treeNodes={props.treeNodes}
+                        index={index}
+                        key={vIndex}
+                        handleClickNode={props.handleClickNode}
+                        {...props.nodeAttrs}
+                      >
+                        {(() => props.nodeSlots)()}
+                      </CascadeListPanelNode>
+                    )
+                  }}
+                </VirtualList>
+              );
+            }
+          })()}
+
+          {props.parent?.isLoading() && <LoadingMask modelValue={true}/>}
+        </div>
+      </div>
+    );
+  },
+});
+
+const CascadePanelVirtualSize = {
+  large: 33,
+  normal: 33,
+  small: 25,
+  mini: 25,
+};