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

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

@@ -1,106 +1,106 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "plain-design-composition";
-import {Input} from "../Input";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {CascadeEmitOptions, CascadePropsOptions, iCascadeCompositionParam} from "./cascade.utils";
-import {createCascadeHooks} from "./createCascadeHooks";
-import {useEdit} from "../../uses/useEdit";
-import './cascade.scss';
-import {TreePropsOptions} from "../TreeCore/createTreeProps";
-import {createMultipleCascadeRender} from "./createMultipleCascadeRender";
-import {createSingleCascadeRender} from "./createSingleCascadeRender";
-import {createCascadeUtils} from "./createCascadeUtils";
-import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {useStyle} from "../../uses/useStyle";
-import {CascadePanelCustomPropsOption} from "../CascadePanel/cascade-panel.utils";
-import {pick} from "../../utils/pick";
-import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
-import {useParentPopupId} from "../usePopup/utils/popup.utils";
-import React from "react";
-import {iTreeNode} from "../TreeCore/createTreeNode";
-
-const _Cascade = designComponent({
-  name: '-cascade',
-  inheritPropsType: Input,
-  props: CascadePropsOptions,
-  emits: CascadeEmitOptions,
-  scopeSlots: {
-    ...TreeScopeSlotsOption,
-  },
-  setup({ props, event, scopeSlots }) {
-
-    const { styleComputed } = useStyle();
-
-    const parentPopupId = useParentPopupId();
-
-    /*绑定值*/
-    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
-    /*内部钩子*/
-    const hooks = createCascadeHooks();
-    /*工具函数*/
-    const utils = createCascadeUtils({ props });
-    /*编辑控制*/
-    const editControl = useEdit();
-    /*传递tree属性*/
-    const treeProps = computed(() => {
-      const passProps = pick(props, (Object.keys(TreePropsOptions) as (keyof typeof TreePropsOptions)[]));
-      return { ...passProps, size: styleComputed.value.size };
-    });
-    /*传递cascade属性*/
-    const cascadeProps = computed(() => {
-      const passProps = pick(props, (Object.keys(CascadePanelCustomPropsOption) as (keyof typeof CascadePanelCustomPropsOption)[]));
-      return { ...passProps, size: styleComputed.value.size };
-    });
-    /*popper面板高度*/
-    const panelHeight = computed(() => props.panel === 'table' ? undefined : Number(removeUnit(props.popperAttrs?.height) || 200));
-    /*公共的popper属性*/
-    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({
-      offset: 1,
-      noArrow: true,
-      noPadding: true,
-      sizeEqual: true,
-      parentId: parentPopupId,
-      /*虚拟滚动的话不设置高度*/
-      height: props.virtual || props.panel === 'cascade' ? undefined : panelHeight.value,
-      popperSize: styleComputed.value.size,
-      ...props.popperAttrs,
-    }));
-    /*公共class*/
-    const classes = useClasses(() => [getComponentCls('cascade')]);
-
-    const param: iCascadeCompositionParam = {
-      hooks,
-      props,
-      utils,
-      event,
-      editControl,
-      getPublicPopperAttrs,
-      model,
-      treeProps,
-      cascadeProps,
-      classes,
-      scopeSlots,
-      panelHeight,
-      styleComputed,
-    };
-    useWatchAutoClear(() => props.multiple, (multiple) => {return multiple ? createMultipleCascadeRender(param) : createSingleCascadeRender(param);});
-
-    return () => hooks.onRender.exec(undefined);
-  },
-});
-
-type iCascadeChildren =
-  RenderNode |
-  (() => RenderNode) |
-  ((scope: { treeNode: iTreeNode, index: number }) => RenderNode) |
-  {
-    default?: ((scope: { treeNode: iTreeNode, index: number }) => RenderNode),
-    tree?: (treeAttrs: any) => RenderNode,
-  }
-
-export const Cascade = _Cascade as React.FC<Omit<ComponentPropsType<typeof _Cascade>, 'children' | 'v-slots' | 'use'> & {
-  children?: iCascadeChildren,
-  'v-slots'?: iCascadeChildren,
-}>;
-
-export default Cascade;
+import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "plain-design-composition";
+import {Input} from "../Input";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {CascadeEmitOptions, CascadePropsOptions, iCascadeCompositionParam} from "./cascade.utils";
+import {createCascadeHooks} from "./createCascadeHooks";
+import {useEdit} from "../../uses/useEdit";
+import './cascade.scss';
+import {TreePropsOptions} from "../TreeCore/createTreeProps";
+import {createMultipleCascadeRender} from "./createMultipleCascadeRender";
+import {createSingleCascadeRender} from "./createSingleCascadeRender";
+import {createCascadeUtils} from "./createCascadeUtils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import {removeUnit} from "plain-utils/string/removeUnit";
+import {useStyle} from "../../uses/useStyle";
+import {CascadePanelCustomPropsOption} from "../CascadePanel/cascade-panel.utils";
+import {pick} from "../../utils/pick";
+import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
+import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import React from "react";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+
+const _Cascade = designComponent({
+  name: '-cascade',
+  inheritPropsType: Input,
+  props: CascadePropsOptions,
+  emits: CascadeEmitOptions,
+  scopeSlots: {
+    ...TreeScopeSlotsOption,
+  },
+  setup({ props, event, scopeSlots }) {
+
+    const { styleComputed } = useStyle();
+
+    const parentPopupId = useParentPopupId();
+
+    /*绑定值*/
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+    /*内部钩子*/
+    const hooks = createCascadeHooks();
+    /*工具函数*/
+    const utils = createCascadeUtils({ props });
+    /*编辑控制*/
+    const editControl = useEdit();
+    /*传递tree属性*/
+    const treeProps = computed(() => {
+      const passProps = pick(props, (Object.keys(TreePropsOptions) as (keyof typeof TreePropsOptions)[]));
+      return { ...passProps, size: styleComputed.value.size };
+    });
+    /*传递cascade属性*/
+    const cascadeProps = computed(() => {
+      const passProps = pick(props, (Object.keys(CascadePanelCustomPropsOption) as (keyof typeof CascadePanelCustomPropsOption)[]));
+      return { ...passProps, size: styleComputed.value.size };
+    });
+    /*popper面板高度*/
+    const panelHeight = computed(() => props.panel === 'table' ? undefined : Number(removeUnit(props.popperAttrs?.height) || 200));
+    /*公共的popper属性*/
+    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({
+      offset: 1,
+      noArrow: true,
+      noPadding: true,
+      sizeEqual: true,
+      parentId: parentPopupId,
+      /*虚拟滚动的话不设置高度*/
+      height: props.virtual || props.panel === 'cascade' ? undefined : panelHeight.value,
+      popperSize: styleComputed.value.size,
+      ...props.popperAttrs,
+    }));
+    /*公共class*/
+    const classes = useClasses(() => [getComponentCls('cascade')]);
+
+    const param: iCascadeCompositionParam = {
+      hooks,
+      props,
+      utils,
+      event,
+      editControl,
+      getPublicPopperAttrs,
+      model,
+      treeProps,
+      cascadeProps,
+      classes,
+      scopeSlots,
+      panelHeight,
+      styleComputed,
+    };
+    useWatchAutoClear(() => props.multiple, (multiple) => {return multiple ? createMultipleCascadeRender(param) : createSingleCascadeRender(param);});
+
+    return () => hooks.onRender.exec(undefined);
+  },
+});
+
+type iCascadeChildren =
+  RenderNode |
+  (() => RenderNode) |
+  ((scope: { treeNode: iTreeNode, index: number }) => RenderNode) |
+  {
+    default?: ((scope: { treeNode: iTreeNode, index: number }) => RenderNode),
+    tree?: (treeAttrs: any) => RenderNode,
+  }
+
+export const Cascade = _Cascade as React.FC<Omit<ComponentPropsType<typeof _Cascade>, 'children' | 'v-slots' | 'use'> & {
+  children?: iCascadeChildren,
+  'v-slots'?: iCascadeChildren,
+}>;
+
+export default Cascade;

package/src/packages/components/CascadePanel/cascade-panel.utils.ts

@@ -1,90 +1,90 @@
-import {TreePropsOptions} from "../TreeCore/createTreeProps";
-import {ExtractPropTypes, PropType} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {iTreeNode} from "../TreeCore/createTreeNode";
-import {iTreeCore} from "../TreeCore/createTreeCore";
-import {PlainObject} from "plain-utils/utils/event";
-
-/**
- * 级联面板类型，cascade为级联列表，flat为平铺面板
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export const eCascadePanelType = createEnum(['cascade', 'flat'] as const);
-
-/**
- * CascadePanel自定义的属性
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export const CascadePanelCustomPropsOption = {
-  panelWidth: { type: Number },                                                     // cascade选择的时候单个面板的宽度
-  filterPanelWidth: { type: Number },                                               // cascade选择的时候，筛选面板的宽度
-  panelType: { type: String as PropType<typeof eCascadePanelType.TYPE>, default: eCascadePanelType.cascade }, // 级联面板类型
-  flatPanelPlaceholder: { type: Array as PropType<string[]> },                      // 屏幕级联面板时选择每一级的提示语
-} as const;
-
-/**
- * CascadePanel属性
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export const CascadePanelPropsOption = {
-  modelValue: {},
-  height: {},
-  ...CascadePanelCustomPropsOption,
-  ...TreePropsOptions,
-};
-
-/**
- * CascadePanelItem属性
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export const CascadePanelItemPropsOption = {
-  parent: { type: Object as PropType<iTreeNode | null> },
-  treeNodes: { type: Array as PropType<iTreeNode[]>, required: true },
-  autoScroll: { type: Boolean, default: true },
-  nodeSlots: { type: Object as PropType<PlainObject> },
-  nodeAttrs: { type: Object as PropType<PlainObject> },
-  handleClickNode: { type: Function as PropType<iCascadeHandleClickNode>, required: true },
-} as const;
-
-/**
- * CascadePanelNode属性
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export const CascadePanelNodePropsOption = {
-  treeNode: { type: Object as PropType<iTreeNode>, required: true },
-  treeNodes: { type: Object as PropType<iTreeNode[]>, required: true },
-  index: { type: Number, required: true },
-  noArrow: { type: Boolean },
-  handleClickNode: { type: Function as PropType<iCascadeHandleClickNode>, required: true },
-} as const;
-
-/**
- * 渲染CascadePanelItem所需要的数据类型
- * @author  韦胜健
- * @date    2022.12.12 21:09
- */
-export interface iCascadePanelMeta {
-  parent: iTreeNode | null,
-  treeNodes: iTreeNode[],
-}
-
-/**
- * 处理点击节点事件的函数类型
- * @author  韦胜健
- * @date    2022.12.12 21:10
- */
-export type iCascadeHandleClickNode = (data: { treeNode: iTreeNode, treeNodes: iTreeNode[] | null, index: number }) => void
-
-export type iCascadePanelPropsType = ExtractPropTypes<typeof CascadePanelPropsOption>
-
-export type iCascadePanelItemPublicParam = {
-  panels: { value: iCascadePanelMeta[] },
-  props: iCascadePanelPropsType,
-  handleClickNode: iCascadeHandleClickNode,
-  treeCore: iTreeCore,
-}
+import {TreePropsOptions} from "../TreeCore/createTreeProps";
+import {ExtractPropTypes, PropType} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import {iTreeCore} from "../TreeCore/createTreeCore";
+import {PlainObject} from "plain-utils/utils/event";
+
+/**
+ * 级联面板类型，cascade为级联列表，flat为平铺面板
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export const eCascadePanelType = createEnum(['cascade', 'flat'] as const);
+
+/**
+ * CascadePanel自定义的属性
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export const CascadePanelCustomPropsOption = {
+  panelWidth: { type: Number },                                                     // cascade选择的时候单个面板的宽度
+  filterPanelWidth: { type: Number },                                               // cascade选择的时候，筛选面板的宽度
+  panelType: { type: String as PropType<typeof eCascadePanelType.TYPE>, default: eCascadePanelType.cascade }, // 级联面板类型
+  flatPanelPlaceholder: { type: Array as PropType<string[]> },                      // 屏幕级联面板时选择每一级的提示语
+} as const;
+
+/**
+ * CascadePanel属性
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export const CascadePanelPropsOption = {
+  modelValue: {},
+  height: {},
+  ...CascadePanelCustomPropsOption,
+  ...TreePropsOptions,
+};
+
+/**
+ * CascadePanelItem属性
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export const CascadePanelItemPropsOption = {
+  parent: { type: Object as PropType<iTreeNode | null> },
+  treeNodes: { type: Array as PropType<iTreeNode[]>, required: true },
+  autoScroll: { type: Boolean, default: true },
+  nodeSlots: { type: Object as PropType<PlainObject> },
+  nodeAttrs: { type: Object as PropType<PlainObject> },
+  handleClickNode: { type: Function as PropType<iCascadeHandleClickNode>, required: true },
+} as const;
+
+/**
+ * CascadePanelNode属性
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export const CascadePanelNodePropsOption = {
+  treeNode: { type: Object as PropType<iTreeNode>, required: true },
+  treeNodes: { type: Object as PropType<iTreeNode[]>, required: true },
+  index: { type: Number, required: true },
+  noArrow: { type: Boolean },
+  handleClickNode: { type: Function as PropType<iCascadeHandleClickNode>, required: true },
+} as const;
+
+/**
+ * 渲染CascadePanelItem所需要的数据类型
+ * @author  韦胜健
+ * @date    2022.12.12 21:09
+ */
+export interface iCascadePanelMeta {
+  parent: iTreeNode | null,
+  treeNodes: iTreeNode[],
+}
+
+/**
+ * 处理点击节点事件的函数类型
+ * @author  韦胜健
+ * @date    2022.12.12 21:10
+ */
+export type iCascadeHandleClickNode = (data: { treeNode: iTreeNode, treeNodes: iTreeNode[] | null, index: number }) => void
+
+export type iCascadePanelPropsType = ExtractPropTypes<typeof CascadePanelPropsOption>
+
+export type iCascadePanelItemPublicParam = {
+  panels: { value: iCascadePanelMeta[] },
+  props: iCascadePanelPropsType,
+  handleClickNode: iCascadeHandleClickNode,
+  treeCore: iTreeCore,
+}

package/src/packages/components/CascadePanel/flat/CascadeFlatPanelNode.tsx

@@ -1,56 +1,56 @@
-import {computed, designComponent, iMouseEvent, useClasses} from "plain-design-composition";
-import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
-import {CascadePanel} from "../index";
-import {Radio} from "../../Radio";
-import {CheckboxStatus} from "../../../utils/constant";
-import {Checkbox} from "../../Checkbox";
-import {Empty} from "../../Empty";
-
-export const CascadeFlatPanelNode = designComponent({
-  name: 'cascade-flat-panel-node',
-  props: CascadePanelNodePropsOption,
-  setup({ props }) {
-
-    const panel = CascadePanel.use.inject();
-
-    const classes = useClasses(() => [
-      'cascade-panel-flat-item',
-      {
-        'cascade-panel-flat-item-empty': props.treeNode.empty,
-      }
-    ]);
-
-    const isChecked = computed(() => props.treeNode.checkStatus() === CheckboxStatus.check);
-
-    const handler = {
-      onClickRadio: (e?: iMouseEvent) => {
-        e?.stopPropagation();
-        panel.treeCore.methods.singleSelect(props.treeNode);
-      },
-      onClickCheckbox: (e?: iMouseEvent) => {
-        e?.stopPropagation();
-        panel.treeCore.methods.toggleCheck(props.treeNode);
-      },
-      onClick: () => {
-        props.handleClickNode({ treeNode: props.treeNode, index: props.index, treeNodes: props.treeNodes });
-      },
-    };
-
-    return () => {
-      const { checkLast } = panel.treeCore.state.singleCheckType;
-      return (
-        <div className={classes.value} onClick={handler.onClick}>
-          {props.treeNode.empty ? (
-            <Empty noData label={panel.props.noDataText}/>
-          ) : <>
-            {!panel.props.multiple && !checkLast && <Radio modelValue={isChecked.value} customReadonly onClick={handler.onClickRadio}/>}
-            {panel.props.multiple && <Checkbox disabled={!props.treeNode.isCheckAble()} checkStatus={props.treeNode.checkStatus()} customReadonly onClick={handler.onClickCheckbox}/>}
-            <span>
-              {panel.scopeSlots.default({ treeNode: props.treeNode, index: props.index }, props.treeNode.label())}
-            </span>
-          </>}
-        </div>
-      );
-    };
-  },
-});
+import {computed, designComponent, iMouseEvent, useClasses} from "plain-design-composition";
+import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
+import {CascadePanel} from "../index";
+import {Radio} from "../../Radio";
+import {CheckboxStatus} from "../../../utils/constant";
+import {Checkbox} from "../../Checkbox";
+import {Empty} from "../../Empty";
+
+export const CascadeFlatPanelNode = designComponent({
+  name: 'cascade-flat-panel-node',
+  props: CascadePanelNodePropsOption,
+  setup({ props }) {
+
+    const panel = CascadePanel.use.inject();
+
+    const classes = useClasses(() => [
+      'cascade-panel-flat-item',
+      {
+        'cascade-panel-flat-item-empty': props.treeNode.empty,
+      }
+    ]);
+
+    const isChecked = computed(() => props.treeNode.checkStatus() === CheckboxStatus.check);
+
+    const handler = {
+      onClickRadio: (e?: iMouseEvent) => {
+        e?.stopPropagation();
+        panel.treeCore.methods.singleSelect(props.treeNode);
+      },
+      onClickCheckbox: (e?: iMouseEvent) => {
+        e?.stopPropagation();
+        panel.treeCore.methods.toggleCheck(props.treeNode);
+      },
+      onClick: () => {
+        props.handleClickNode({ treeNode: props.treeNode, index: props.index, treeNodes: props.treeNodes });
+      },
+    };
+
+    return () => {
+      const { checkLast } = panel.treeCore.state.singleCheckType;
+      return (
+        <div className={classes.value} onClick={handler.onClick}>
+          {props.treeNode.empty ? (
+            <Empty noData label={panel.props.noDataText}/>
+          ) : <>
+            {!panel.props.multiple && !checkLast && <Radio modelValue={isChecked.value} customReadonly onClick={handler.onClickRadio}/>}
+            {panel.props.multiple && <Checkbox disabled={!props.treeNode.isCheckAble()} checkStatus={props.treeNode.checkStatus()} customReadonly onClick={handler.onClickCheckbox}/>}
+            <span>
+              {panel.scopeSlots.default({ treeNode: props.treeNode, index: props.index }, props.treeNode.label())}
+            </span>
+          </>}
+        </div>
+      );
+    };
+  },
+});