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

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

@@ -1,77 +1,77 @@
-import {cacheComputed, designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, onMounted, useClasses, useRefs} from '@peryl/react-compose';
-import {Carousel} from '../Carousel';
-import {createEffects} from "@peryl/utils/createEffects";
-import {addElementListener} from "@peryl/utils/addElementListener";
-import {PreviewerLoading} from "../ImagePreviewer/PreviewerLoading";
-
-export const CarouselItem = designComponent({
-  name: 'carousel-item',
-  props: {
-    val: { type: [String, Number] },
-    distance: { type: Number },
-    index: { type: Number },
-    alignItems: { type: String },
-    loading: { type: Boolean },
-  },
-  inheritPropsType: iHTMLDivElement,
-  emits: {
-    onMousedownInner: (e: MouseEvent) => true,
-    onTouchstartInner: (e: TouchEvent) => true,
-  },
-  slots: ['default'],
-  setup({ props: _props, slots, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({ inner: iHTMLDivElement });
-
-    const carousel = Carousel.use.inject();
-
-    const props = _props as iCarouselItemMeta['props'];
-
-    const classes = useClasses(() => [
-      getComponentCls('carousel-item'),
-      {
-        'carousel-active': props.distance === 0,
-        'carousel-prev': props.distance === -1,
-        'carousel-next': props.distance === 1
-      }
-    ]);
-
-    const styles = cacheComputed(
-      () => {
-        const style = carousel.utils.getItemStyles({ props });
-        style.alignItems = props.alignItems;
-        return style;
-      },
-      (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
-    );
-
-    const { effects: setupEffects } = createEffects();
-
-    onMounted(() => {
-      setupEffects.push(addElementListener(refs.inner!, 'mousedown', e => emit.onMousedownInner(e), { passive: false }));
-      setupEffects.push(addElementListener(refs.inner!, 'touchstart', e => emit.onTouchstartInner(e), { passive: false }));
-    });
-
-    onBeforeUnmount(setupEffects.clear);
-
-    return () => (
-      <div style={styles.value} className={classes.value}>
-        <div className="carousel-item-inner" ref={onRef.inner}>{slots.default()}</div>
-        {/*<PreviewerLoading/>*/}
-        {!!props.loading && <PreviewerLoading/>}
-      </div>
-    );
-  }
-});
-
-export default CarouselItem;
-
-export interface iCarouselItemMeta {
-  props: {
-    val?: string;
-    index: number;
-    distance: number,
-    alignItems: string,
-    loading?: boolean
-  };
-}
+import {cacheComputed, designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, onMounted, useClasses, useRefs} from '@peryl/react-compose';
+import {Carousel} from '../Carousel';
+import {createEffects} from "@peryl/utils/createEffects";
+import {addElementListener} from "@peryl/utils/addElementListener";
+import {PreviewerLoading} from "../ImagePreviewer/PreviewerLoading";
+
+export const CarouselItem = designComponent({
+  name: 'carousel-item',
+  props: {
+    val: { type: [String, Number] },
+    distance: { type: Number },
+    index: { type: Number },
+    alignItems: { type: String },
+    loading: { type: Boolean },
+  },
+  inheritPropsType: iHTMLDivElement,
+  emits: {
+    onMousedownInner: (e: MouseEvent) => true,
+    onTouchstartInner: (e: TouchEvent) => true,
+  },
+  slots: ['default'],
+  setup({ props: _props, slots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ inner: iHTMLDivElement });
+
+    const carousel = Carousel.use.inject();
+
+    const props = _props as iCarouselItemMeta['props'];
+
+    const classes = useClasses(() => [
+      getComponentCls('carousel-item'),
+      {
+        'carousel-active': props.distance === 0,
+        'carousel-prev': props.distance === -1,
+        'carousel-next': props.distance === 1
+      }
+    ]);
+
+    const styles = cacheComputed(
+      () => {
+        const style = carousel.utils.getItemStyles({ props });
+        style.alignItems = props.alignItems;
+        return style;
+      },
+      (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
+    );
+
+    const { effects: setupEffects } = createEffects();
+
+    onMounted(() => {
+      setupEffects.push(addElementListener(refs.inner!, 'mousedown', e => emit.onMousedownInner(e), { passive: false }));
+      setupEffects.push(addElementListener(refs.inner!, 'touchstart', e => emit.onTouchstartInner(e), { passive: false }));
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div style={styles.value} className={classes.value}>
+        <div className="carousel-item-inner" ref={onRef.inner}>{slots.default()}</div>
+        {/*<PreviewerLoading/>*/}
+        {!!props.loading && <PreviewerLoading/>}
+      </div>
+    );
+  }
+});
+
+export default CarouselItem;
+
+export interface iCarouselItemMeta {
+  props: {
+    val?: string;
+    index: number;
+    distance: number,
+    alignItems: string,
+    loading?: boolean
+  };
+}

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

@@ -1,158 +1,158 @@
-import {computed, designComponent, PropType, reactive, useModel} from "@peryl/react-compose";
-import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
-import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import Cascade from "./index";
-import {omit} from "@peryl/utils/omit";
-import {inheritSlots} from "../../utils/inheritSlots";
-import {PlainObject} from "@peryl/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;}
+import {computed, designComponent, PropType, reactive, useModel} from "@peryl/react-compose";
+import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import Cascade from "./index";
+import {omit} from "@peryl/utils/omit";
+import {inheritSlots} from "../../utils/inheritSlots";
+import {PlainObject} from "@peryl/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;}