plain-design 1.0.0-beta.70 → 1.0.0-beta.72

package/src/packages/components/Select/createSelectOptionDecoder.tsx

@@ -1,43 +1,43 @@
-import {iSelectOptionProps} from "./select.utils";
-import {findReactElement} from "../../utils/findReactElement";
-import {SelectOption} from "../SelectOption";
-import {reactive} from "plain-design-composition";
-
-export interface iSelectOptionDecodeMeta {
-  props: iSelectOptionProps;
-  node: any,
-}
-
-/**
- * 解析虚拟dom中的SelectOption信息
- * @author  韦胜健
- * @date    2022.12.4 11:30
- */
-export function createSelectOptionDecoder() {
-  const state = reactive({ renderKey: '@@renderKey' });
-  const staticState = { renderCount: 0 };
-
-  const options: iSelectOptionDecodeMeta[] = [];
-  const decode = (renderNode: any) => {
-    const optionNodes: any[] = findReactElement(renderNode, (node: any) => node?.type?.use?.name === SelectOption.use.name) || [];
-    options.splice(0, options.length);
-    options.push(...optionNodes.map(node => ({
-      props: node.props,
-      node,
-    })));
-    if (!staticState.renderCount) {
-      /*第一次render的时候不更新state.renderKey*/
-      staticState.renderCount++;
-    } else {
-      const newRenderKey = options.map(i => `${i.props.label}_${i.props.val}`).join(',');
-      // console.log({ newRenderKey, renderKey: state.renderKey, });
-      if (state.renderKey !== newRenderKey) {state.renderKey = newRenderKey;}
-    }
-  };
-
-  const isRender = () => {return !!state.renderKey;};
-
-  return { options, decode, isRender };
-}
-
-export type iSelectOptionDecoder = ReturnType<typeof createSelectOptionDecoder>
+import {iSelectOptionProps} from "./select.utils";
+import {findReactElement} from "../../utils/findReactElement";
+import {SelectOption} from "../SelectOption";
+import {reactive} from "plain-design-composition";
+
+export interface iSelectOptionDecodeMeta {
+  props: iSelectOptionProps;
+  node: any,
+}
+
+/**
+ * 解析虚拟dom中的SelectOption信息
+ * @author  韦胜健
+ * @date    2022.12.4 11:30
+ */
+export function createSelectOptionDecoder() {
+  const state = reactive({ renderKey: '@@renderKey' });
+  const staticState = { renderCount: 0 };
+
+  const options: iSelectOptionDecodeMeta[] = [];
+  const decode = (renderNode: any) => {
+    const optionNodes: any[] = findReactElement(renderNode, (node: any) => node?.type?.use?.name === SelectOption.use.name) || [];
+    options.splice(0, options.length);
+    options.push(...optionNodes.map(node => ({
+      props: node.props,
+      node,
+    })));
+    if (!staticState.renderCount) {
+      /*第一次render的时候不更新state.renderKey*/
+      staticState.renderCount++;
+    } else {
+      const newRenderKey = options.map(i => `${i.props.label}_${i.props.val}`).join(',');
+      // console.log({ newRenderKey, renderKey: state.renderKey, });
+      if (state.renderKey !== newRenderKey) {state.renderKey = newRenderKey;}
+    }
+  };
+
+  const isRender = () => {return !!state.renderKey;};
+
+  return { options, decode, isRender };
+}
+
+export type iSelectOptionDecoder = ReturnType<typeof createSelectOptionDecoder>

package/src/packages/components/Select/createSingleSelectRender.tsx

@@ -1,129 +1,129 @@
-import {iSelectCompositionParams} from "./select.utils";
-import {Input} from "../Input";
-import {createPublicSelectRender} from "./createPublicSelectRender";
-import {reactive, useModel} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
-
-/**
- * 单选组合函数，支持普通单选以及虚拟列表的方式
- * @author  韦胜健
- * @date    2022/8/8 20:06
- */
-export function createSingleSelectRender(params: iSelectCompositionParams) {
-
-  const { props, hooks, editComputed, scopeSlots, classes, isMatch } = params;
-
-  const state = reactive({
-    /*input输入绑定值*/
-    inputValue: null as null | string
-  });
-
-  const model = useModel(() => props.modelValue, params.emit.onUpdateModelValue, {
-    onChange: async () => {
-      await delay();
-      state.inputValue = selector.optionListHandler.getMatchLabel();
-    }
-  });
-
-  const selector = createPublicSelectRender(params, {
-    isActivated: props => isMatch({ option: props.val, value: model.value }),
-    model,
-    ...(() => {
-      /**
-       * 处理选中上一个值或者下一个值得时候的一些公共逻辑
-       * @author  韦胜健
-       * @date    2022.7.23 20:08
-       */
-      const handlePublic = (e: KeyboardEvent, getValueIndex: (index: number, length: number) => number) => {
-        if (!model.value) {
-          /*如果当前没有值，则直接设置为第一个值*/
-          model.value = selector.optionListHandler.getOptionPropsList()[0]?.val;
-        } else {
-          const optionPropsList = selector.optionListHandler.getOptionPropsList();
-          let index = optionPropsList.findIndex(i => i.val === model.value);
-          model.value = optionPropsList[getValueIndex(index, optionPropsList.length)]?.val;
-          state.inputValue = selector.optionListHandler.getMatchLabel();
-        }
-      };
-      return {
-        /*否则直接切换选中值*/
-        handlePrevWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === 0 ? length - 1 : (index - 1));},
-        /*否则直接切换选中值*/
-        handleNextWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === length - 1 ? 0 : index + 1);},
-      };
-    })(),
-    /**
-     * 选中某个选项的处理动作
-     * @author  韦胜健
-     * @date    2022/8/8 20:15
-     */
-    onSelectOption: (optionProps) => {
-      if (optionProps.disabled || !editComputed.value.editable) {return;}
-      /*应用绑定值*/
-      model.value = optionProps.val;
-      /*立即应用 inputValue，等close的时候再应用有点慢了*/
-      state.inputValue = selector.optionListHandler.getMatchLabel();
-      /*关闭 popper*/
-      selector.popper.methods.hide();
-    },
-    defaultCurrent: undefined,
-  });
-
-  selector.effects.push(hooks.renderInput.use(() => {
-
-    selector.optionListHandler.decode();
-    /*显示文本*/
-    const label: string = selector.optionListHandler.getMatchLabel();
-    /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
-    const placeholder = (selector.state.isFocus ? label : props.placeholder) || props.placeholder;
-    /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
-    const inputValue = selector.state.isFocus && !props.disableFilter ? state.inputValue : label;
-
-    return selector.reference.renderReference({
-      slotExist: scopeSlots.reference.isExist,
-      slotRender: () => scopeSlots.reference({ checked: selector.optionListHandler.getActivated()[0] }),
-      defaultRender: () => (
-        <Input
-          {...{
-            noClear: props.noClear,
-            class: classes.value,
-            ref: selector.onRef.input,
-            customReadonly: props.disableFilter,
-            placeholder: placeholder,
-            modelValue: inputValue,
-            clearHandler: selector.handler.onInputClear,
-            suffixIcon: props.suffixIcon,
-            size: props.size,
-            onChange: selector.handler.onInputChange,
-            onFocus: selector.handler.onInputFocus,
-            onBlur: selector.handler.onInputBlur,
-            onKeydown: selector.handler.onInputKeydown,
-            ...props.inputAttrs,
-          }}
-          v-slots={props.inputSlots}
-        />
-      )
-    });
-  }));
-
-  selector.effects.push(hooks.onPopperClose.use(() => {
-    /*重置input绑定值，防止输入一半取消选择时显示不正确的文本*/
-    state.inputValue = selector.optionListHandler.getMatchLabel();
-  }));
-
-  selector.effects.push(hooks.onPopperShow.use(() => {
-    state.inputValue = null;
-  }));
-
-  selector.effects.push(hooks.onInputTextChange.use((val) => {
-    /*应用绑定值*/
-    state.inputValue = val;
-  }));
-
-  selector.effects.push(hooks.onInputClear.use(() => {
-    /*点击clear的时候，应用输入绑定值*/
-    state.inputValue = null;
-  }));
-
-  return () => selector.effects.clear();
-}
+import {iSelectCompositionParams} from "./select.utils";
+import {Input} from "../Input";
+import {createPublicSelectRender} from "./createPublicSelectRender";
+import {reactive, useModel} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+/**
+ * 单选组合函数，支持普通单选以及虚拟列表的方式
+ * @author  韦胜健
+ * @date    2022/8/8 20:06
+ */
+export function createSingleSelectRender(params: iSelectCompositionParams) {
+
+  const { props, hooks, editComputed, scopeSlots, classes, isMatch } = params;
+
+  const state = reactive({
+    /*input输入绑定值*/
+    inputValue: null as null | string
+  });
+
+  const model = useModel(() => props.modelValue, params.emit.onUpdateModelValue, {
+    onChange: async () => {
+      await delay();
+      state.inputValue = selector.optionListHandler.getMatchLabel();
+    }
+  });
+
+  const selector = createPublicSelectRender(params, {
+    isActivated: props => isMatch({ option: props.val, value: model.value }),
+    model,
+    ...(() => {
+      /**
+       * 处理选中上一个值或者下一个值得时候的一些公共逻辑
+       * @author  韦胜健
+       * @date    2022.7.23 20:08
+       */
+      const handlePublic = (e: KeyboardEvent, getValueIndex: (index: number, length: number) => number) => {
+        if (!model.value) {
+          /*如果当前没有值，则直接设置为第一个值*/
+          model.value = selector.optionListHandler.getOptionPropsList()[0]?.val;
+        } else {
+          const optionPropsList = selector.optionListHandler.getOptionPropsList();
+          let index = optionPropsList.findIndex(i => i.val === model.value);
+          model.value = optionPropsList[getValueIndex(index, optionPropsList.length)]?.val;
+          state.inputValue = selector.optionListHandler.getMatchLabel();
+        }
+      };
+      return {
+        /*否则直接切换选中值*/
+        handlePrevWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === 0 ? length - 1 : (index - 1));},
+        /*否则直接切换选中值*/
+        handleNextWhenNotShow: (e: KeyboardEvent) => {handlePublic(e, (index, length) => index === length - 1 ? 0 : index + 1);},
+      };
+    })(),
+    /**
+     * 选中某个选项的处理动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:15
+     */
+    onSelectOption: (optionProps) => {
+      if (optionProps.disabled || !editComputed.value.editable) {return;}
+      /*应用绑定值*/
+      model.value = optionProps.val;
+      /*立即应用 inputValue，等close的时候再应用有点慢了*/
+      state.inputValue = selector.optionListHandler.getMatchLabel();
+      /*关闭 popper*/
+      selector.popper.methods.hide();
+    },
+    defaultCurrent: undefined,
+  });
+
+  selector.effects.push(hooks.renderInput.use(() => {
+
+    selector.optionListHandler.decode();
+    /*显示文本*/
+    const label: string = selector.optionListHandler.getMatchLabel();
+    /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
+    const placeholder = (selector.state.isFocus ? label : props.placeholder) || props.placeholder;
+    /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
+    const inputValue = selector.state.isFocus && !props.disableFilter ? state.inputValue : label;
+
+    return selector.reference.renderReference({
+      slotExist: scopeSlots.reference.isExist,
+      slotRender: () => scopeSlots.reference({ checked: selector.optionListHandler.getActivated()[0] }),
+      defaultRender: () => (
+        <Input
+          {...{
+            noClear: props.noClear,
+            class: classes.value,
+            ref: selector.onRef.input,
+            customReadonly: props.disableFilter,
+            placeholder: placeholder,
+            modelValue: inputValue,
+            clearHandler: selector.handler.onInputClear,
+            suffixIcon: props.suffixIcon,
+            size: props.size,
+            onChange: selector.handler.onInputChange,
+            onFocus: selector.handler.onInputFocus,
+            onBlur: selector.handler.onInputBlur,
+            onKeydown: selector.handler.onInputKeydown,
+            ...props.inputAttrs,
+          }}
+          v-slots={props.inputSlots}
+        />
+      )
+    });
+  }));
+
+  selector.effects.push(hooks.onPopperClose.use(() => {
+    /*重置input绑定值，防止输入一半取消选择时显示不正确的文本*/
+    state.inputValue = selector.optionListHandler.getMatchLabel();
+  }));
+
+  selector.effects.push(hooks.onPopperShow.use(() => {
+    state.inputValue = null;
+  }));
+
+  selector.effects.push(hooks.onInputTextChange.use((val) => {
+    /*应用绑定值*/
+    state.inputValue = val;
+  }));
+
+  selector.effects.push(hooks.onInputClear.use(() => {
+    /*点击clear的时候，应用输入绑定值*/
+    state.inputValue = null;
+  }));
+
+  return () => selector.effects.clear();
+}

package/src/packages/components/Select/decodeSelectRenderNode.tsx

@@ -1,50 +1,50 @@
-import {RenderNode} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {Scroll} from "../Scroll";
-import {iIsMatchSearch, SelectUtils} from "./select.utils";
-import {createSelectOptionDecoder} from "./createSelectOptionDecoder";
-import {deepCloneRenderNode} from "../../utils/deepCloneRenderNode";
-
-export function decodeSelectRenderNode(
-  {
-    renderNode,
-    searchText,
-    props,
-    onRefScroll,
-    innerState,
-  }: {
-    renderNode: RenderNode,
-    searchText: string,
-    props: {
-      isMatchSearch?: iIsMatchSearch,
-      disableAutoSetOptionIndex?: boolean,
-      scrollNum: number,
-      scrollHeight: number,
-    },
-    onRefScroll: (scroll: any) => void,
-    innerState?: { renderKey: string }
-  }) {
-  const selectOptionDecoder = createSelectOptionDecoder();
-  renderNode = deepCloneRenderNode(renderNode);
-  selectOptionDecoder.decode(renderNode);
-  let optionPropsList = [...selectOptionDecoder.options.map(i => i.props)];
-  let matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(searchText, i, props));
-  const render = () => {
-    if (!!innerState && !innerState.renderKey) {return null;}
-    let count = 0;
-    /*设置optionProps.index，以便于option能够知道自己的index位置，方便移动hover的选项*/
-    /*当开发者给SelectOption包装了几层组件之后，自动设置index会出现异常，此时需要开发者手动给option设置index*/
-    if (!props.disableAutoSetOptionIndex) {
-      optionPropsList.forEach(optionProps => {optionProps.index = undefined;});
-      matchOptionPropsList.forEach((optionProps) => {optionProps.index = count++;});
-    }
-    /*如果显示的选项大于6个，则使用Scroll滚动显示，否则直接显示*/
-    return (matchOptionPropsList.length > props.scrollNum ?
-      (<div style={{ height: unit(props.scrollHeight)! }}>
-        <Scroll ref={onRefScroll}>
-          {renderNode}
-        </Scroll>
-      </div>) : renderNode);
-  };
-  return { optionPropsList, matchOptionPropsList, render };
-}
+import {RenderNode} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {Scroll} from "../Scroll";
+import {iIsMatchSearch, SelectUtils} from "./select.utils";
+import {createSelectOptionDecoder} from "./createSelectOptionDecoder";
+import {deepCloneRenderNode} from "../../utils/deepCloneRenderNode";
+
+export function decodeSelectRenderNode(
+  {
+    renderNode,
+    searchText,
+    props,
+    onRefScroll,
+    innerState,
+  }: {
+    renderNode: RenderNode,
+    searchText: string,
+    props: {
+      isMatchSearch?: iIsMatchSearch,
+      disableAutoSetOptionIndex?: boolean,
+      scrollNum: number,
+      scrollHeight: number,
+    },
+    onRefScroll: (scroll: any) => void,
+    innerState?: { renderKey: string }
+  }) {
+  const selectOptionDecoder = createSelectOptionDecoder();
+  renderNode = deepCloneRenderNode(renderNode);
+  selectOptionDecoder.decode(renderNode);
+  let optionPropsList = [...selectOptionDecoder.options.map(i => i.props)];
+  let matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(searchText, i, props));
+  const render = () => {
+    if (!!innerState && !innerState.renderKey) {return null;}
+    let count = 0;
+    /*设置optionProps.index，以便于option能够知道自己的index位置，方便移动hover的选项*/
+    /*当开发者给SelectOption包装了几层组件之后，自动设置index会出现异常，此时需要开发者手动给option设置index*/
+    if (!props.disableAutoSetOptionIndex) {
+      optionPropsList.forEach(optionProps => {optionProps.index = undefined;});
+      matchOptionPropsList.forEach((optionProps) => {optionProps.index = count++;});
+    }
+    /*如果显示的选项大于6个，则使用Scroll滚动显示，否则直接显示*/
+    return (matchOptionPropsList.length > props.scrollNum ?
+      (<div style={{ height: unit(props.scrollHeight)! }}>
+        <Scroll ref={onRefScroll}>
+          {renderNode}
+        </Scroll>
+      </div>) : renderNode);
+  };
+  return { optionPropsList, matchOptionPropsList, render };
+}

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

@@ -1,85 +1,85 @@
-import {designComponent, getComponentCls, reactive, useClasses} from "plain-design-composition";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {createSingleSelectRender} from "./createSingleSelectRender";
-import {createMultipleSelectRender} from "./createMultipleSelectRender";
-import {iSelectCompositionParams, SelectEmitsOption, SelectPropOptions, SelectScopeSlotsOption, SelectSlotsOption, useSelectHook} from "./select.utils";
-import './select.scss';
-import {useEdit} from "../../uses/useEdit";
-import {useStyle} from "../../uses/useStyle";
-import {createIsMatch} from "../../utils/isObjectCommonMatch";
-import Input from "../Input";
-import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
-import {useParentPopupId} from "../usePopup/utils/popup.utils";
-
-export const Select = designComponent({
-  name: '-select',
-  props: SelectPropOptions,
-  emits: SelectEmitsOption,
-  slots: SelectSlotsOption,
-  scopeSlots: SelectScopeSlotsOption,
-  inheritPropsType: Input,
-  setup({ props, slots, scopeSlots, event: { emit } }) {
-
-    const parentPopupId = useParentPopupId();
-
-    const { editComputed } = useEdit();
-    const { styleComputed } = useStyle();
-
-    const hooks = useSelectHook();
-
-    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({
-      offset: 2,
-      noArrow: true,
-      sizeEqual: true,
-      animation: 'drop',
-      noPadding: true,
-      popperSize: styleComputed.value.size,
-      ...((props.popperAttrs as any) || {}),
-      externalClass: [getComponentCls('select-popup'), (props.popperAttrs as any)?.externalClass],
-      parentId: parentPopupId,
-    }));
-
-    const isPopperShow = (() => {
-      const state = reactive({ value: false });
-      hooks.onPopperShow.use(() => {state.value = true;});
-      hooks.onPopperHide.use(() => {state.value = false;});
-      return state;
-    })();
-
-    const classes = useClasses(() => [
-      getComponentCls('select'),
-      {
-        [`select-popper-show`]: isPopperShow.value
-      }
-    ]);
-
-    const selectCompositionParams: iSelectCompositionParams = {
-      props,
-      classes,
-      hooks,
-      emit,
-      slots,
-      scopeSlots,
-      editComputed,
-      styleComputed,
-      isMatch: createIsMatch(props),
-      getPublicPopperAttrs,
-    };
-
-    const methods = {
-      show: () => {hooks.onTriggerShow.exec(undefined);},
-      hide: () => {hooks.onTriggerHide.exec(undefined);},
-    };
-
-    useWatchAutoClear(() => props.multiple, multiple => {
-      return multiple ? createMultipleSelectRender(selectCompositionParams) : createSingleSelectRender(selectCompositionParams);
-    });
-
-    return {
-      refer: {
-        methods,
-      },
-      render: () => hooks.renderInput.exec(null),
-    };
-  },
-});
+import {designComponent, getComponentCls, reactive, useClasses} from "plain-design-composition";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {createSingleSelectRender} from "./createSingleSelectRender";
+import {createMultipleSelectRender} from "./createMultipleSelectRender";
+import {iSelectCompositionParams, SelectEmitsOption, SelectPropOptions, SelectScopeSlotsOption, SelectSlotsOption, useSelectHook} from "./select.utils";
+import './select.scss';
+import {useEdit} from "../../uses/useEdit";
+import {useStyle} from "../../uses/useStyle";
+import {createIsMatch} from "../../utils/isObjectCommonMatch";
+import Input from "../Input";
+import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
+import {useParentPopupId} from "../usePopup/utils/popup.utils";
+
+export const Select = designComponent({
+  name: '-select',
+  props: SelectPropOptions,
+  emits: SelectEmitsOption,
+  slots: SelectSlotsOption,
+  scopeSlots: SelectScopeSlotsOption,
+  inheritPropsType: Input,
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const parentPopupId = useParentPopupId();
+
+    const { editComputed } = useEdit();
+    const { styleComputed } = useStyle();
+
+    const hooks = useSelectHook();
+
+    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({
+      offset: 2,
+      noArrow: true,
+      sizeEqual: true,
+      animation: 'drop',
+      noPadding: true,
+      popperSize: styleComputed.value.size,
+      ...((props.popperAttrs as any) || {}),
+      externalClass: [getComponentCls('select-popup'), (props.popperAttrs as any)?.externalClass],
+      parentId: parentPopupId,
+    }));
+
+    const isPopperShow = (() => {
+      const state = reactive({ value: false });
+      hooks.onPopperShow.use(() => {state.value = true;});
+      hooks.onPopperHide.use(() => {state.value = false;});
+      return state;
+    })();
+
+    const classes = useClasses(() => [
+      getComponentCls('select'),
+      {
+        [`select-popper-show`]: isPopperShow.value
+      }
+    ]);
+
+    const selectCompositionParams: iSelectCompositionParams = {
+      props,
+      classes,
+      hooks,
+      emit,
+      slots,
+      scopeSlots,
+      editComputed,
+      styleComputed,
+      isMatch: createIsMatch(props),
+      getPublicPopperAttrs,
+    };
+
+    const methods = {
+      show: () => {hooks.onTriggerShow.exec(undefined);},
+      hide: () => {hooks.onTriggerHide.exec(undefined);},
+    };
+
+    useWatchAutoClear(() => props.multiple, multiple => {
+      return multiple ? createMultipleSelectRender(selectCompositionParams) : createSingleSelectRender(selectCompositionParams);
+    });
+
+    return {
+      refer: {
+        methods,
+      },
+      render: () => hooks.renderInput.exec(null),
+    };
+  },
+});