plain-design 1.0.0-beta.101 → 1.0.0-beta.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.101",
+  "version": "1.0.0-beta.103",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

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

@@ -0,0 +1,158 @@
+import {computed, designComponent, PropType, reactive, useModel} from "plain-design-composition";
+import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import Cascade from "./index";
+import {omit} from "plain-utils/object/omit";
+import {inheritSlots} from "../../utils/inheritSlots";
+import {PlainObject} from "plain-utils/utils/event";
+
+/**
+ * 用来编辑key可能冲突的级联数据，仅支持单选不支持多选
+ * @author  韦胜健
+ * @date    2024.8.7 18:43
+ */
+export const CascadeKeys = designComponent({
+  name: 'conflict-cascade',
+  inheritPropsType: Cascade,
+  props: {
+    /*key有冲突的情况下，不支持多选，多选必须保证key为唯一标识不能有冲突，并且singleValueType必须是all*/
+    ...omit(CascadePropsOptions, ['keyField', 'multiple', 'singleValueType', "modelValue"]),
+    /*绑定值一定是数组，可能是nodeData对象数组，也可能是key字符串数组*/
+    modelValue: { type: Array as PropType<(string | PlainObject)[]> },
+    /*keyField一定要存在*/
+    keyField: { type: [String, Function] as PropType<string | ((nodeData: any) => string)>, required: true },
+    /*值类型设置，为true则表明绑定值modelValue为字符串数组，否则为object对象数组*/
+    useKeysValue: { type: Boolean },
+  },
+  emits: CascadeEmitOptions,
+  scopeSlots: {
+    ...TreeScopeSlotsOption,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const dataModel = useModel(() => props.data, emit.onUpdateData);
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const utils = reactive({
+      getDataLabel: computed((): iUseCascadeDataPropsLabelFunction => {
+        const { labelField } = props;
+        return typeof labelField === "function" ? labelField : ((nodeData) => (nodeData as any)[labelField]);
+      }),
+      getDataKey: computed((): iUseCascadeDataPropsValFunction => {
+        const { keyField } = props;
+        return typeof keyField === "function" ? keyField : ((nodeData) => (nodeData as any)[keyField]);
+      }),
+      getDataChildren: computed((): iUseCascadeDataPropsChildrenFunction => {
+        const { childrenField } = props;
+        return typeof childrenField === "function" ? childrenField : ((nodeData) => (nodeData as any)[childrenField]);
+      }),
+      formatData2CascadeData: (nodeData: any, getParent: iCascadeWrapData['getParent'] = (() => undefined)): iCascadeWrapData => {
+        const label = utils.getDataLabel(nodeData);
+        const key = utils.getDataKey(nodeData);
+        const children = utils.getDataChildren(nodeData);
+        const keys: string[] = [...getParent()?.keys || [], key];
+        const ret: iCascadeWrapData = { label, key, nodeData, getParent, keys, keyString: keys.join('.') };
+        if (!!children) {
+          const formatChildren = children.map(child => utils.formatData2CascadeData(child, () => ret));
+          ret.children = formatChildren;
+        }
+        return ret;
+      },
+    });
+
+    const cascadeData = computed((): iCascadeWrapData[] | undefined => props.data?.map(item => utils.formatData2CascadeData(item)));
+
+    const cascadeModelValue = computed((): iCascadeWrapData[] | undefined => {
+      if (!model.value?.length) {return undefined;}
+      const modelValueList = [...model.value];
+      const ret: iCascadeWrapData[] = [];
+
+      let list = cascadeData.value;
+      let itemModelValue = modelValueList.shift();
+      while (itemModelValue && !!list?.length) {
+        const itemModelValueKey = props.useKeysValue ? itemModelValue : utils.getDataKey(itemModelValue);
+        const matchItem = list.find(i => i.key == itemModelValueKey);
+        if (!!matchItem) {
+          ret.push(matchItem);
+          list = matchItem.children || [];
+          itemModelValue = modelValueList.shift();
+        } else {
+          break;
+        }
+      }
+
+      return ret;
+    });
+
+    const handler = {
+      onUpdateData: (newData: iCascadeWrapData[] | undefined | null) => {
+        if (!newData) {dataModel.value = newData;}
+        dataModel.value = cascadeData.value?.map(itemData => itemData.nodeData);
+      },
+      onUpdateModelValue: (val: iCascadeWrapData[] | null | undefined) => {
+        model.value = props.useKeysValue ?
+          val?.map(i => i.key) :
+          val?.map(i => i.nodeData);
+      },
+      setChildrenData: (cascadeWrapData: iCascadeWrapData, childrenData: any[] | null | undefined) => {
+        const { childrenField, setChildrenData } = props;
+        if (typeof childrenField === "string") {
+          (cascadeWrapData.nodeData as any)[childrenField] = childrenData;
+        } else {
+          if (!!setChildrenData) {
+            setChildrenData(cascadeWrapData.nodeData, childrenData);
+          } else {
+            throw new Error('tree: props.setChildrenData is required when childrenField is function');
+          }
+        }
+      },
+      isCheckAble: (cascadeWrapData: iCascadeWrapData) => {return props.isCheckAble!(cascadeWrapData.nodeData);},
+      isLeaf: (cascadeWrapData: iCascadeWrapData) => {return props.isLeaf!(cascadeWrapData.nodeData);},
+      filterMethod: (cascadeWrapData: iCascadeWrapData, filterText: string) => {return props.filterMethod!(cascadeWrapData.nodeData, filterText);},
+    };
+
+    const cascadeAttrs = computed(() => {
+      const { useKeysValue, ..._props } = props;
+      return {
+        ..._props,
+        data: cascadeData.value,
+        onUpdateData: handler.onUpdateData,
+        modelValue: cascadeModelValue.value,
+        onUpdateModelValue: handler.onUpdateModelValue,
+
+        setChildrenData: !props.setChildrenData ? undefined : handler.setChildrenData,
+        isCheckAble: !props.isCheckAble ? undefined : handler.isCheckAble,
+        isLeaf: !props.isLeaf ? undefined : handler.isLeaf,
+        filterMethod: !props.filterMethod ? undefined : handler.filterMethod,
+
+        labelField: "label",
+        keyField: "keyString",
+        childrenField: "children",
+        singleValueType: "all" as const,
+      };
+    });
+
+    return () => (
+      <Cascade{...cascadeAttrs.value} v-slots={inheritSlots({ scopeSlots })}/>
+    );
+  },
+});
+
+
+interface iCascadeWrapData {
+  label: string,
+  key: string,
+  children?: iCascadeWrapData[],
+
+  keys: string[],
+  keyString: string,
+  nodeData: any,
+  getParent: () => iCascadeWrapData | undefined,
+}
+
+interface iUseCascadeDataPropsLabelFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsValFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsChildrenFunction {(nodeData: any): any[] | undefined | null;}

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

@@ -0,0 +1,5 @@
+import {CascadeKeys} from "../Cascade/CascadeKeys";
+
+export {CascadeKeys};
+
+export default CascadeKeys;

package/src/packages/components/Input/index.scss

@@ -356,7 +356,7 @@
           .input-tag {
             height: auto;
             min-height: calc(#{$height} - 8px);
-            white-space: nowrap;
+            white-space: normal;
             word-break: break-all;
             max-width: 100%;
           }

package/src/packages/components/InputNumber/number.scss

@@ -30,6 +30,7 @@
   &.number-button-type-right {
     .number-button-container {
       display: flex;
+      color: plv(text-2);
       flex-direction: column;
       align-items: stretch;
       justify-content: center;
@@ -73,6 +74,8 @@
 @include prefix(number-resize) {
   padding-left: 100%;
   position: relative;
+  color: plv(text-2);
+
   & > div {
     position: absolute;
     @include inset;

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

@@ -53,11 +53,11 @@ export function createTreeNode(
   /*设置子节点数据*/
   const setChildrenData = (childrenData: any[] | null | undefined) => {
     const { childrenField, setChildrenData } = props;
-    if (typeof childrenField === "string") {
-      (data as any)[childrenField] = childrenData;
+    if (!!setChildrenData) {
+      setChildrenData(data, childrenData);
     } else {
-      if (!!setChildrenData) {
-        setChildrenData(data, childrenData);
+      if (typeof childrenField === "string") {
+        (data as any)[childrenField] = childrenData;
       } else {
         throw new Error('tree: props.setChildrenData is required when childrenField is function');
       }

package/src/packages/entry.tsx

@@ -66,6 +66,7 @@ export {SelectGroup} from './components/SelectGroup';
 export {Form} from './components/Form';
 export {FormItem} from './components/FormItem';
 export {Cascade} from './components/Cascade';
+export {CascadeKeys} from './components/CascadeKeys';
 export {Image} from './components/Image';
 export {Tooltip} from './components/Tooltip';
 export {useImage} from './components/useImage';

package/src/packages/utils/inheritSlots.ts

@@ -24,5 +24,7 @@ export function inheritSlots<
   !!slots && Object.keys(slots).forEach((k: keyof Slots) => {if (slots[k].isExist()) {ret[k] = () => slots[k]();}});
   !!scopeSlots && Object.keys(scopeSlots).forEach((k: keyof ScopeSlots) => {if (scopeSlots[k].isExist()) {ret[k] = (...args: any[]) => scopeSlots[k](...args);}});
 
+  if (!Object.keys(ret).length) {return undefined;}
+
   return ret;
 }