plain-design 1.0.0-beta.9 → 1.0.0-beta.91

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>
+      );
+    };
+  },
+});

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

@@ -1,145 +1,133 @@
-@include prefix(cascade-panel-flat) {
-  width: 500px;
-
-  .cascade-panel-flat-header {
-    position: sticky;
-    top: 0;
-    background-color: plv(background-color);
-    display: flex;
-    align-items: center;
-    z-index: 10;
-
-    @include comp(icon) {
-      color: plv(text-4);
-    }
-
-    .cascade-panel-flat-header-item {
-      display: inline-block;
-      transition: background-color linear 300ms;
-      border-radius: plv(box-size-small-border-radius);
-
-      &:last-child {
-        color: plv(primary-6);
-      }
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      height: 1px;
-      left: 0;
-      right: 0;
-      background-color: plv(border-color);
-    }
-  }
-  .cascade-panel-flat-body {
-    display: flex;
-    flex-wrap: wrap;
-
-    .cascade-panel-flat-item {
-      display: inline-flex;
-      align-items: flex-start;
-      justify-content: flex-start;
-      width: 25%;
-      box-sizing: border-box;
-      cursor: pointer;
-      transition: background-color linear 300ms;
-      border-radius: plv(box-size-small-border-radius);
-
-      @include comp(checkbox) {
-        line-height: 1.4em;
-      }
-
-      div, span {
-        //line-height: 24px;
-      }
-
-      &:hover:not(.cascade-panel-flat-item-empty):not(.cascade-panel-flat-item-full) {
-        background-color: plv(background-hover);
-      }
-
-      .#{componentName(checkbox)}, .#{componentName(radio)} {
-        margin-right: 4px;
-      }
-
-      &.cascade-panel-flat-item-empty, &.cascade-panel-flat-item-full {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 32px !important;
-
-        @include comp(loading) {
-          font-size: 28px;
-          color: plv(primary-6);
-        }
-      }
-    }
-  }
-}
-
-@include comp(cascade-panel) {
-  &.cascade-panel-size-normal, &.cascade-panel-size-large {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-header {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
-
-        .cascade-panel-flat-header-item {
-          padding: 0 8px;
-          line-height: 28px;
-          cursor: pointer;
-
-          &:hover {
-            background-color: plv(background-hover);
-          }
-        }
-      }
-      .cascade-panel-flat-body {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
-
-        .cascade-panel-flat-item {
-          padding: 8px 8px;
-        }
-      }
-    }
-  }
-  &.cascade-panel-size-small, &.cascade-panel-size-mini {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-header {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
-
-        .cascade-panel-flat-header-item {
-          padding: 0 4px;
-          line-height: 24px;
-          cursor: pointer;
-
-          &:hover {
-            background-color: plv(background-hover);
-          }
-        }
-      }
-      .cascade-panel-flat-body {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
-
-        .cascade-panel-flat-item {
-          padding: 4px 4px;
-        }
-      }
-    }
-  }
-
-  @include sizeMixin(cascade-panel, ()) {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-item {
-        border-radius: plv(box-size-#{$name}-border-radius);
-      }
-      .cascade-panel-flat-header {
-        font-size: $font-size;
-      }
-      .cascade-panel-flat-body {
-        font-size: $font-size;
-      }
-    }
-  }
-}
+@include prefix(cascade-panel-flat) {
+  width: 500px;
+
+  & > .#{componentName(scroll)} {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: initial !important;
+        overflow-y: initial !important;
+      }
+    }
+  }
+
+  .cascade-panel-flat-header {
+    position: sticky;
+    top: 0;
+    background-color: plv(background-color);
+    display: flex;
+    align-items: center;
+    z-index: 10;
+
+    @include comp(icon) {
+      color: plv(text-4);
+    }
+
+    .cascade-panel-flat-header-item {
+      display: inline-block;
+      transition: background-color linear 300ms;
+      border-radius: plv(box-size-small-border-radius);
+
+      &:last-child {
+        color: plv(primary-6);
+      }
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      left: 0;
+      right: 0;
+      background-color: plv(border-color);
+    }
+  }
+  .cascade-panel-flat-body {
+    display: flex;
+    flex-wrap: wrap;
+
+    .cascade-panel-flat-item {
+      display: inline-flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: 25%;
+      box-sizing: border-box;
+      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;
+      }
+
+      div, span {
+        //line-height: 24px;
+      }
+
+      &:hover:not(.cascade-panel-flat-item-empty):not(.cascade-panel-flat-item-full) {
+        background-color: plv(background-hover);
+      }
+
+      .#{componentName(checkbox)}, .#{componentName(radio)} {
+        margin-right: 4px;
+      }
+
+      &.cascade-panel-flat-item-empty, &.cascade-panel-flat-item-full {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px !important;
+
+        @include comp(loading) {
+          font-size: 28px;
+          color: plv(primary-6);
+        }
+      }
+    }
+  }
+}
+
+@include comp(cascade-panel) {
+  &.cascade-panel-size-normal, &.cascade-panel-size-large {
+    @include comp(cascade-panel-flat) {
+      .cascade-panel-flat-header {
+
+      }
+      .cascade-panel-flat-body {
+
+      }
+    }
+  }
+
+  @include sizeMixin(cascade-panel, ()) {
+    @include comp(cascade-panel-flat) {
+      .cascade-panel-flat-item {
+        border-radius: plv(box-size-#{$name}-border-radius);
+      }
+      .cascade-panel-flat-header {
+        font-size: $font-size;
+        padding: 2px 2px;
+
+        .cascade-panel-flat-header-item {
+          padding: 0 calc(#{plv(input-padding-x-#{$name})} - 2px);
+          line-height: 28px;
+          cursor: pointer;
+
+          &:hover {
+            background-color: plv(background-hover);
+          }
+        }
+      }
+      .cascade-panel-flat-body {
+        font-size: $font-size;
+        padding: 2px 2px;
+
+        .cascade-panel-flat-item {
+          padding: calc((#{plv(input-padding-x-#{$name})} - 2px) * 0.6) calc(#{plv(input-padding-x-#{$name})} - 2px);
+        }
+      }
+    }
+  }
+}