plain-design 1.0.0-beta.4 → 1.0.0-beta.5

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

@@ -1,64 +1,64 @@
-import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "plain-design-composition";
-import Dropdown from "../../../Dropdown";
-import {iTableRefer} from "../../table/Table";
-import {PlainObject} from "plain-utils/utils/event";
-import Icon from "../../../Icon";
-import {tPlcType} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
-
-export const PlcTreeHeader = designComponent({
-  props: {
-    table: { type: Object as PropType<iTableRefer>, required: true },
-    buttonStyles: { type: Object as PropType<PlainObject>, required: true },
-    getPlcRefer: { type: Function as PropType<() => tPlcType>, required: true },
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const state = reactive({
-      popperOffset: 0
-    });
-
-    const { refs, onRef } = useRefs({
-      reference: iHTMLElement,
-    });
-
-    const utils = {
-      resetOffset: () => {
-        const referenceRect = refs.reference!.getBoundingClientRect();
-        const parentRect = refs.reference!.parentElement!.getBoundingClientRect();
-        state.popperOffset = (parentRect.height - referenceRect.height) / 2;
-      },
-    };
-
-    watch(() => props.table.props.size, async () => {
-      await delay();
-      utils.resetOffset();
-    }, { immediate: true });
-
-    onBeforeUnmount(props.table.hooks.onClickHeadCell.use(({ e, plc }) => {
-      if (plc.refer() !== props.getPlcRefer()) {
-        return;
-      }
-      if (refs.reference!.contains(e.target as any)) {
-        return;
-      }
-      props.table.event.emit.onClickHead(plc, e);
-    }));
-
-    return () => (
-      <Dropdown
-        arrowSize={0}
-        offset={state.popperOffset}
-        v-slots={{
-          reference: () => (
-            <div style={props.buttonStyles} className="plc-tree-button plc-tree-head-button" ref={onRef.reference}>
-              <Icon icon="pi-more"/>
-            </div>
-          ),
-          popper: () => slots.default()
-        }}
-      />
-    );
-  },
-});
+import {designComponent, iHTMLElement, onBeforeUnmount, PropType, reactive, useRefs, watch} from "plain-design-composition";
+import Dropdown from "../../../Dropdown";
+import {iTableRefer} from "../../table/Table";
+import {PlainObject} from "plain-utils/utils/event";
+import Icon from "../../../Icon";
+import {tPlcType} from "../../plc/utils/plc.utils";
+import {delay} from "plain-utils/utils/delay";
+
+export const PlcTreeHeader = designComponent({
+  props: {
+    table: { type: Object as PropType<iTableRefer>, required: true },
+    buttonStyles: { type: Object as PropType<PlainObject>, required: true },
+    getPlcRefer: { type: Function as PropType<() => tPlcType>, required: true },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const state = reactive({
+      popperOffset: 0
+    });
+
+    const { refs, onRef } = useRefs({
+      reference: iHTMLElement,
+    });
+
+    const utils = {
+      resetOffset: () => {
+        const referenceRect = refs.reference!.getBoundingClientRect();
+        const parentRect = refs.reference!.parentElement!.getBoundingClientRect();
+        state.popperOffset = (parentRect.height - referenceRect.height) / 2;
+      },
+    };
+
+    watch(() => props.table.props.size, async () => {
+      await delay();
+      utils.resetOffset();
+    }, { immediate: true });
+
+    onBeforeUnmount(props.table.hooks.onClickHeadCell.use(({ e, plc }) => {
+      if (plc.refer() !== props.getPlcRefer()) {
+        return;
+      }
+      if (refs.reference!.contains(e.target as any)) {
+        return;
+      }
+      props.table.event.emit.onClickHead(plc, e);
+    }));
+
+    return () => (
+      <Dropdown
+        arrowSize={0}
+        offset={state.popperOffset}
+        v-slots={{
+          reference: () => (
+            <div style={props.buttonStyles} className="plc-tree-button plc-tree-head-button" ref={onRef.reference}>
+              <Icon icon="pi-more"/>
+            </div>
+          ),
+          popper: () => slots.default()
+        }}
+      />
+    );
+  },
+});

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

@@ -1,112 +1,112 @@
-import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "plain-design-composition";
-import {iTreeNode} from "../../../TreeCore/createTreeNode";
-import {iTableNode} from "../../table/utils/table.utils";
-import {iTreeCore} from "../../../TreeCore/createTreeCore";
-import {unit} from "plain-utils/string/unit";
-import {iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
-import Checkbox from "../../../Checkbox";
-import Loading from "../../../Loading";
-import Icon from "../../../Icon";
-import {tPlc} from "../../plc/utils/plc.utils";
-import {PlainObject} from "plain-utils/utils/event";
-
-export const RenderPlcTreeNode = designComponent({
-  props: {
-    treeNode: { type: Object as PropType<iTreeNode>, required: true },
-    tableNode: { type: Object as PropType<iTableNode>, required: true },
-    treeCore: { type: Object as PropType<iTreeCore>, required: true },
-    scopeSlots: { type: Object as PropType<iPlcTreeScopeSlotsType>, required: true },
-    plc: { type: Object as PropType<tPlc>, required: true },
-    row: { type: Object as PropType<PlainObject>, required: true },
-    buttonStyles: { type: Object as PropType<PlainObject>, required: true },
-  },
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
-
-    const isLeaf = computed(() => props.treeNode.isLeaf());
-    const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
-    const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
-
-    const handler = {
-      /**
-       * 处理点击展开图标
-       * @author  韦胜健
-       * @date    2022.9.21 21:54
-       */
-      onClickExpandIcon: () => {
-        if (props.treeNode.empty) {return;}
-        props.treeCore.hooks.onClickExpandIcon.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      /**
-       * 处理点击节点内容
-       * @author  韦胜健
-       * @date    2022.9.21 21:54
-       */
-      onClickNodeContent: () => {
-        if (props.treeNode.empty) {return;}
-        props.treeCore.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      /**
-       * 处理点击复选框
-       * @author  韦胜健
-       * @date    2022.9.21 21:55
-       */
-      onClickCheckbox: () => {
-        if (props.treeNode.empty) {return;}
-        props.treeCore.hooks.onClickCheckbox.exec({ treeNode: props.treeNode, el: refs.el! });
-      },
-      onMousedownDraggier: computed(() => !props.treeCore.draggier.value ? undefined : ((e: iMouseEvent) => {
-        props.treeCore.draggier.value!.onMousedownDraggier(e, props.treeNode);
-      })),
-    };
-
-    return () => {
-      const { treeNode, tableNode } = props;
-      const { leafIcon, folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
-      return (
-        <div className={getComponentCls('plc-tree-node')} ref={onRef.el}>
-          <div className="tree-node-operator">
-            {treeNode.level > 0 && (
-              <div className="plc-tree-node-placeholder" style={{ width: unit(treeNode.level * PlcTreeButtonSize)! }}/>
-            )}
-            <div className={`tree-node-expander plc-tree-button ${isLeaf.value ? 'tree-node-leaf' : ''}`} onClick={handler.onClickExpandIcon} style={props.buttonStyles}>
-              {treeNode.isLoading() ?
-                <Loading type="gamma"/> :
-                <Icon
-                  icon={isLeaf.value || treeNode.empty ? leafIcon : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
-                />}
-            </div>
-            {props.treeCore.props.multiple && (
-              <div className={`tree-node-checker plc-tree-button`}>
-                <Checkbox
-                  checkStatus={checkStatus.value}
-                  disabled={!props.treeNode.isCheckAble()}
-                  onClick={handler.onClickCheckbox}
-                />
-              </div>
-            )}
-            {props.treeCore.props.draggable && (
-              <div
-                className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
-                onMouseDown={handler.onMousedownDraggier.value}
-              >
-                <Icon icon="pi-menu"/>
-              </div>
-            )}
-          </div>
-          {(props.scopeSlots.content.isExist() || !!props.plc.props.field) && (
-            <div className="tree-node-content" onClick={handler.onClickNodeContent}>
-              {(() => {
-                const { nodeIcon } = props.treeCore.props;
-                const icon = nodeIcon?.(props.treeNode);
-                return !icon ? null : <Icon icon={icon} className="plc-tree-node-icon"/>;
-              })()}
-              {props.scopeSlots.content({ treeNode, tableNode }, tableNode.data[props.plc.props.field!])}
-            </div>
-          )}
-        </div>
-      );
-    };
-  },
-});
+import {cacheComputed, classnames, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useRefs} from "plain-design-composition";
+import {iTreeNode} from "../../../TreeCore/createTreeNode";
+import {iTableNode} from "../../table/utils/table.utils";
+import {iTreeCore} from "../../../TreeCore/createTreeCore";
+import {unit} from "plain-utils/string/unit";
+import {iPlcTreeScopeSlotsType, PlcTreeButtonSize} from "./PlcTree.utils";
+import Checkbox from "../../../Checkbox";
+import Loading from "../../../Loading";
+import Icon from "../../../Icon";
+import {tPlc} from "../../plc/utils/plc.utils";
+import {PlainObject} from "plain-utils/utils/event";
+
+export const RenderPlcTreeNode = designComponent({
+  props: {
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    tableNode: { type: Object as PropType<iTableNode>, required: true },
+    treeCore: { type: Object as PropType<iTreeCore>, required: true },
+    scopeSlots: { type: Object as PropType<iPlcTreeScopeSlotsType>, required: true },
+    plc: { type: Object as PropType<tPlc>, required: true },
+    row: { type: Object as PropType<PlainObject>, required: true },
+    buttonStyles: { type: Object as PropType<PlainObject>, required: true },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const isLeaf = computed(() => props.treeNode.isLeaf());
+    const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
+    const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+
+    const handler = {
+      /**
+       * 处理点击展开图标
+       * @author  韦胜健
+       * @date    2022.9.21 21:54
+       */
+      onClickExpandIcon: () => {
+        if (props.treeNode.empty) {return;}
+        props.treeCore.hooks.onClickExpandIcon.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      /**
+       * 处理点击节点内容
+       * @author  韦胜健
+       * @date    2022.9.21 21:54
+       */
+      onClickNodeContent: () => {
+        if (props.treeNode.empty) {return;}
+        props.treeCore.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      /**
+       * 处理点击复选框
+       * @author  韦胜健
+       * @date    2022.9.21 21:55
+       */
+      onClickCheckbox: () => {
+        if (props.treeNode.empty) {return;}
+        props.treeCore.hooks.onClickCheckbox.exec({ treeNode: props.treeNode, el: refs.el! });
+      },
+      onMousedownDraggier: computed(() => !props.treeCore.draggier.value ? undefined : ((e: iMouseEvent) => {
+        props.treeCore.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+    };
+
+    return () => {
+      const { treeNode, tableNode } = props;
+      const { leafIcon, folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
+      return (
+        <div className={getComponentCls('plc-tree-node')} ref={onRef.el}>
+          <div className="tree-node-operator">
+            {treeNode.level > 0 && (
+              <div className="plc-tree-node-placeholder" style={{ width: unit(treeNode.level * PlcTreeButtonSize)! }}/>
+            )}
+            <div className={`tree-node-expander plc-tree-button ${isLeaf.value ? 'tree-node-leaf' : ''}`} onClick={handler.onClickExpandIcon} style={props.buttonStyles}>
+              {treeNode.isLoading() ?
+                <Loading type="gamma"/> :
+                <Icon
+                  icon={isLeaf.value || treeNode.empty ? leafIcon : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
+                />}
+            </div>
+            {props.treeCore.props.multiple && (
+              <div className={`tree-node-checker plc-tree-button`}>
+                <Checkbox
+                  checkStatus={checkStatus.value}
+                  disabled={!props.treeNode.isCheckAble()}
+                  onClick={handler.onClickCheckbox}
+                />
+              </div>
+            )}
+            {props.treeCore.props.draggable && (
+              <div
+                className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
+                onMouseDown={handler.onMousedownDraggier.value}
+              >
+                <Icon icon="pi-menu"/>
+              </div>
+            )}
+          </div>
+          {(props.scopeSlots.content.isExist() || !!props.plc.props.field) && (
+            <div className="tree-node-content" onClick={handler.onClickNodeContent}>
+              {(() => {
+                const { nodeIcon } = props.treeCore.props;
+                const icon = nodeIcon?.(props.treeNode);
+                return !icon ? null : <Icon icon={icon} className="plc-tree-node-icon"/>;
+              })()}
+              {props.scopeSlots.content({ treeNode, tableNode }, tableNode.data[props.plc.props.field!])}
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});