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

package/src/packages/components/Object/createObjectRender.single.tsx

@@ -1,215 +1,215 @@
-import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {Select} from "../Select";
-import {computed, reactive, useRefs, watch} from "plain-design-composition";
-import {convertRowToSelected, convertSelectedToRow} from "../$object/object.conver";
-import {PlainObject} from "plain-utils/utils/event";
-import {SelectOption} from "../SelectOption";
-import i18n from "../i18n";
-
-/**
- * 渲染对象选择框单选
- * @author  韦胜健
- * @date    2023.1.25 14:49
- */
-export function createObjectRenderSingle(
-  { props, event, hooks, classes, inputSlots, object, loading, loadData, editComputed }: iObjectCompositionParam
-) {
-  const { effects } = createEffects();
-
-  const { refs, onRef } = useRefs({ select: Select });
-
-  const publicHandler = {
-    /**
-     * 清空值
-     * @author  韦胜健
-     * @date    2023.1.25 8:17
-     */
-    onClear: () => {
-      const newRow = convertSelectedToRow({}, props.map);
-      !!props.row && Object.assign(props.row, newRow);
-    },
-    /**
-     * 应用新值
-     * @author  韦胜健
-     * @date    2023.1.25 8:17
-     */
-    onSelect: (selected: PlainObject | null | undefined) => {
-      if (!selected) {
-        publicHandler.onClear();
-      } else {
-        const newRow = convertSelectedToRow(selected, props.map);
-        !!props.row && Object.assign(props.row, newRow);
-      }
-      inputHandler.state.inputValue = selected?.[props.labelField];
-      event.emit.onSelect(selected);
-    },
-  };
-
-  /**
-   * 处理Input组件绑定值相关内容
-   * @author  韦胜健
-   * @date    2023.1.25 8:20
-   */
-  const inputHandler = (() => {
-    const state = reactive({
-      /*当前输入的绑定文本*/
-      inputValue: props.modelValue as any,
-      /*当前是否获取焦点*/
-      isFocus: false,
-    });
-    const handler = {
-      /*处理获取焦点动作*/
-      onFocus: (e: FocusEvent) => {
-        state.isFocus = true;
-        hooks.onFocus.exec(e);
-      },
-      /*处理失去焦点动作*/
-      onBlur: (e: FocusEvent) => {
-        state.inputValue = null;
-        state.isFocus = false;
-        hooks.onBlur.exec(e);
-      },
-      /*处理输入值变化动作，如果没有禁用输入搜索，则立即开启加载状态*/
-      onUpdateModelValue: (val: string | null) => {
-        if (props.disableFilter) {return;}
-        loading.value = !!val && !!val.trim().length;
-        state.inputValue = val;
-        hooks.onInputChange.exec(val);
-      },
-    };
-    const inputAttrs = computed(() => {
-      /*当前选中数据的显示值*/
-      const label = props.modelValue;
-      /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
-      const placeholder = (state.isFocus ? label : props.placeholder) || props.placeholder;
-      /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
-      const inputValue = state.isFocus && !props.disableFilter ? state.inputValue : label;
-      return ({
-        ...handler,
-        placeholder,
-        modelValue: inputValue,
-        customReadonly: false,
-        loading: false,
-        clearHandler: publicHandler.onClear
-      });
-    });
-    return { state, inputAttrs };
-  })();
-
-  /**
-   * 处理Select绑定值相关内容
-   * @author  韦胜健
-   * @date    2023.1.25 8:20
-   */
-  const selectHandler = (() => {
-
-    /*将row转化为selected对象，用来辅助getSelectValue实现功能*/
-    const row2selected = computed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
-
-    /*获取当前select的modelValue以及要渲染的select options数组*/
-    const getSelectValue = (): { value: any, option: null | iObjectSelectOption[] } => {
-      const selected = row2selected.value;
-      return selected == null ? { value: null, option: null } : {
-        value: selected[props.keyField],
-        option: null
-      };
-    };
-
-    /*内部状态*/
-    const state = reactive(getSelectValue());
-
-    /*当绑定值变化时，重新计算select的modelValue以及option数组*/
-    effects.push(
-      watch(() => props.modelValue, () => {Object.assign(state, getSelectValue());})
-    );
-
-    /**
-     * 根据搜索关键词加载数据
-     * @author  韦胜健
-     * @date    2023.1.25 8:22
-     */
-    effects.push(
-      hooks.onInputChange.use(val => {
-        state.option = null;
-        if (!val || !val.trim().length) {return;}
-        loadData(val, (data) => {state.option = data;});
-      })
-    );
-    const handler = {
-      /*popper开启的时候立即清空输入值，等待输入搜索关键词*/
-      onShow: () => {inputHandler.state.inputValue = null;},
-      /*popper关闭的时候，重置绑定值；不能在这里重置 inputHandler.state.inputValue，因为当选中select选项的时候也会触发onClose动作*/
-      onClose: () => {Object.assign(state, getSelectValue());},
-    };
-    /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({
-      ...handler,
-    }));
-    /*监听select的选中选项动作*/
-    const onSelectChange = (code: string | null) => {
-      const selected = !code ? null : state.option?.find(i => i.val === code)?.data;
-      publicHandler.onSelect(selected);
-    };
-    /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
-      onUpdateModelValue: onSelectChange,
-      loading: loading.value,
-      class: classes.value,
-      inputSlots: inputSlots,
-      suffixIcon: null as any,
-      popperAttrs: popperAttrs.value,
-      inputAttrs: inputHandler.inputAttrs.value,
-      /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
-      disableFilter: true,
-      /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
-      noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
-    }));
-    return { state, popperAttrs, onSelectChange, selectAttrs };
-  })();
-
-  /**
-   * object服务选择处理
-   * @author  韦胜健
-   * @date    2023.1.25 8:28
-   */
-  const pickHandler = (() => {
-    const pick = async () => {
-      refs.select?.methods.hide();
-      await props.beforeOpenPicker?.();
-      const selected = await object({
-        option: props.option,
-        selected: convertRowToSelected(!props.modelValue ? undefined : props.row, props.map),
-      });
-      publicHandler.onSelect(selected);
-      event.emit.onPick(selected);
-    };
-
-    /*点击后缀图标的时候，打开选择弹窗*/
-    effects.push(hooks.onClickSuffixIcon.use(() => {editComputed.value.editable && pick();}));
-
-    return { pick };
-  })();
-
-  /*渲染主题Select选择框*/
-  effects.push(
-    hooks.onRender.use({
-      processor: ({ list, render }) => {list.push({ render, key: 'single', seq: 1 });},
-      render: () => {
-        return (
-          <Select
-            ref={onRef.select}
-            {...selectHandler.selectAttrs.value}
-            v-slots={{
-              default: () => (
-                selectHandler.state.option?.map(({ label, val, data }) => <SelectOption label={label} val={val} data={data} key={val as any}/>)
-              )
-            }}
-          />
-        );
-      }
-    })
-  );
-
-  return effects.clear;
-}
+import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {Select} from "../Select";
+import {computed, reactive, useRefs, watch} from "plain-design-composition";
+import {convertRowToSelected, convertSelectedToRow} from "../$object/object.conver";
+import {PlainObject} from "plain-utils/utils/event";
+import {SelectOption} from "../SelectOption";
+import i18n from "../i18n";
+
+/**
+ * 渲染对象选择框单选
+ * @author  韦胜健
+ * @date    2023.1.25 14:49
+ */
+export function createObjectRenderSingle(
+  { props, event, hooks, classes, inputSlots, object, loading, loadData, editComputed }: iObjectCompositionParam
+) {
+  const { effects } = createEffects();
+
+  const { refs, onRef } = useRefs({ select: Select });
+
+  const publicHandler = {
+    /**
+     * 清空值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onClear: () => {
+      const newRow = convertSelectedToRow({}, props.map);
+      !!props.row && Object.assign(props.row, newRow);
+    },
+    /**
+     * 应用新值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onSelect: (selected: PlainObject | null | undefined) => {
+      if (!selected) {
+        publicHandler.onClear();
+      } else {
+        const newRow = convertSelectedToRow(selected, props.map);
+        !!props.row && Object.assign(props.row, newRow);
+      }
+      inputHandler.state.inputValue = selected?.[props.labelField];
+      event.emit.onSelect(selected);
+    },
+  };
+
+  /**
+   * 处理Input组件绑定值相关内容
+   * @author  韦胜健
+   * @date    2023.1.25 8:20
+   */
+  const inputHandler = (() => {
+    const state = reactive({
+      /*当前输入的绑定文本*/
+      inputValue: props.modelValue as any,
+      /*当前是否获取焦点*/
+      isFocus: false,
+    });
+    const handler = {
+      /*处理获取焦点动作*/
+      onFocus: (e: FocusEvent) => {
+        state.isFocus = true;
+        hooks.onFocus.exec(e);
+      },
+      /*处理失去焦点动作*/
+      onBlur: (e: FocusEvent) => {
+        state.inputValue = null;
+        state.isFocus = false;
+        hooks.onBlur.exec(e);
+      },
+      /*处理输入值变化动作，如果没有禁用输入搜索，则立即开启加载状态*/
+      onUpdateModelValue: (val: string | null) => {
+        if (props.disableFilter) {return;}
+        loading.value = !!val && !!val.trim().length;
+        state.inputValue = val;
+        hooks.onInputChange.exec(val);
+      },
+    };
+    const inputAttrs = computed(() => {
+      /*当前选中数据的显示值*/
+      const label = props.modelValue;
+      /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
+      const placeholder = (state.isFocus ? label : props.placeholder) || props.placeholder;
+      /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
+      const inputValue = state.isFocus && !props.disableFilter ? state.inputValue : label;
+      return ({
+        ...handler,
+        placeholder,
+        modelValue: inputValue,
+        customReadonly: false,
+        loading: false,
+        clearHandler: publicHandler.onClear
+      });
+    });
+    return { state, inputAttrs };
+  })();
+
+  /**
+   * 处理Select绑定值相关内容
+   * @author  韦胜健
+   * @date    2023.1.25 8:20
+   */
+  const selectHandler = (() => {
+
+    /*将row转化为selected对象，用来辅助getSelectValue实现功能*/
+    const row2selected = computed(() => {return !props.row || !props.modelValue ? null : convertRowToSelected(props.row, props.map);});
+
+    /*获取当前select的modelValue以及要渲染的select options数组*/
+    const getSelectValue = (): { value: any, option: null | iObjectSelectOption[] } => {
+      const selected = row2selected.value;
+      return selected == null ? { value: null, option: null } : {
+        value: selected[props.keyField],
+        option: null
+      };
+    };
+
+    /*内部状态*/
+    const state = reactive(getSelectValue());
+
+    /*当绑定值变化时，重新计算select的modelValue以及option数组*/
+    effects.push(
+      watch(() => props.modelValue, () => {Object.assign(state, getSelectValue());})
+    );
+
+    /**
+     * 根据搜索关键词加载数据
+     * @author  韦胜健
+     * @date    2023.1.25 8:22
+     */
+    effects.push(
+      hooks.onInputChange.use(val => {
+        state.option = null;
+        if (!val || !val.trim().length) {return;}
+        loadData(val, (data) => {state.option = data;});
+      })
+    );
+    const handler = {
+      /*popper开启的时候立即清空输入值，等待输入搜索关键词*/
+      onShow: () => {inputHandler.state.inputValue = null;},
+      /*popper关闭的时候，重置绑定值；不能在这里重置 inputHandler.state.inputValue，因为当选中select选项的时候也会触发onClose动作*/
+      onClose: () => {Object.assign(state, getSelectValue());},
+    };
+    /*监听popper的部分参数*/
+    const popperAttrs = computed(() => ({
+      ...handler,
+    }));
+    /*监听select的选中选项动作*/
+    const onSelectChange = (code: string | null) => {
+      const selected = !code ? null : state.option?.find(i => i.val === code)?.data;
+      publicHandler.onSelect(selected);
+    };
+    /*给select传递的属性*/
+    const selectAttrs = computed(() => ({
+      onUpdateModelValue: onSelectChange,
+      loading: loading.value,
+      class: classes.value,
+      inputSlots: inputSlots,
+      suffixIcon: null as any,
+      popperAttrs: popperAttrs.value,
+      inputAttrs: inputHandler.inputAttrs.value,
+      /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
+      disableFilter: true,
+      /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
+      noDataLabel: !inputHandler.state.inputValue && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
+    }));
+    return { state, popperAttrs, onSelectChange, selectAttrs };
+  })();
+
+  /**
+   * object服务选择处理
+   * @author  韦胜健
+   * @date    2023.1.25 8:28
+   */
+  const pickHandler = (() => {
+    const pick = async () => {
+      refs.select?.methods.hide();
+      await props.beforeOpenPicker?.();
+      const selected = await object({
+        option: props.option,
+        selected: convertRowToSelected(!props.modelValue ? undefined : props.row, props.map),
+      });
+      publicHandler.onSelect(selected);
+      event.emit.onPick(selected);
+    };
+
+    /*点击后缀图标的时候，打开选择弹窗*/
+    effects.push(hooks.onClickSuffixIcon.use(() => {editComputed.value.editable && pick();}));
+
+    return { pick };
+  })();
+
+  /*渲染主题Select选择框*/
+  effects.push(
+    hooks.onRender.use({
+      processor: ({ list, render }) => {list.push({ render, key: 'single', seq: 1 });},
+      render: () => {
+        return (
+          <Select
+            ref={onRef.select}
+            {...selectHandler.selectAttrs.value}
+            v-slots={{
+              default: () => (
+                selectHandler.state.option?.map(({ label, val, data }) => <SelectOption label={label} val={val} data={data} key={val as any}/>)
+              )
+            }}
+          />
+        );
+      }
+    })
+  );
+
+  return effects.clear;
+}

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

@@ -1,104 +1,104 @@
-import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "plain-design-composition";
-import {Select} from "../Select";
-import {Icon} from "../Icon";
-import './object.scss';
-import {iObjectCompositionParam, ObjectEmitsOption, ObjectPropsOption} from "./object.utils";
-import {createObjectHooks} from "./createObjectHooks";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {createObjectRenderMultiple} from "./createObjectRender.multiple";
-import {createObjectRenderSingle} from "./createObjectRender.single";
-import {$configuration} from "../$configuration";
-import {debounce} from "plain-utils/utils/debounce";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {eFilterOperator} from "../FilterService/utils/filter.service.utils";
-import {useEdit} from "../../uses/useEdit";
-import {stopPopup} from "../usePopup/utils/stopPopup";
-
-export const _Object = designComponent({
-  name: '-object',
-  inheritPropsType: Select,
-  props: ObjectPropsOption,
-  emits: ObjectEmitsOption,
-  setup({ props, event }) {
-
-    const { editComputed } = useEdit();
-
-    const { effects } = createEffects();
-
-    const object = props.service || $configuration.use('object')!;
-
-    const classes = useClasses(() => [
-      getComponentCls('object')
-    ]);
-
-    const handler = {
-      onClickSuffixIcon: (e: iMouseEvent) => {
-        // e.stopPropagation()
-        /*object，点击搜索图标打开弹窗选择的时候，不阻止事件冒泡，而是通过标记函数stopPopper来实现阻止Select打开popper*/
-        stopPopup(e);
-        hooks.onClickSuffixIcon.exec(e);
-      },
-    };
-
-    const inputSlots = {
-      suffix: () => {
-        return <span className="object-icon" onClick={handler.onClickSuffixIcon}><Icon icon="pi-search"/></span>;
-      },
-    };
-
-    const hooks = createObjectHooks();
-
-    const loading = reactive({ value: false });
-
-    const loadData: iObjectCompositionParam['loadData'] = debounce(async (filterText, handler) => {
-      const { effects } = createEffects();
-      const { option } = props;
-      /*查询的字段，目前仅支持单字段查询*/
-      const queryField = props.queryField || props.labelField;
-
-      /*清空掉其他的筛选参数*/
-      option.filterState.clearAll(false);
-
-      /*临时加上queryField字段的筛选参数，请求成功或者失败之后将这个参数移除*/
-      effects.push(
-        option.hooks.onQueryParam.use(() => {
-          return { all: true, queries: [{ field: queryField, value: filterText, operator: eFilterOperator.like, }], };
-        })
-      );
-      loading.value = true;
-      effects.push(() => {loading.value = false;});
-      try {
-        /*开启架子啊状态*/
-        const data = await option.methods.pageMethods.load({ awaitInit: false });
-        if (!!data) {
-          handler(data.list.map((i) => ({ label: i[props.labelField], val: i[props.keyField], data: i })));
-        }
-      } finally {
-        effects.clear();
-      }
-    }, 300);
-
-    const param: iObjectCompositionParam = {
-      props,
-      event,
-      hooks,
-      inputSlots,
-      classes: classes as any,
-      object,
-      loading,
-      loadData,
-      editComputed,
-    };
-
-    useWatchAutoClear(() => props.multiple, multiple => multiple ? createObjectRenderMultiple(param) : createObjectRenderSingle(param));
-
-    effects.push(hooks.onFocus.use(e => {event.emit.onFocus(e);}));
-    effects.push(hooks.onBlur.use(e => {event.emit.onBlur(e);}));
-
-    onBeforeUnmount(() => {effects.clear();});
-
-    return () => (hooks.onRender.exec());
-  },
-});
-
-export default _Object;
+import {designComponent, getComponentCls, iMouseEvent, onBeforeUnmount, reactive, useClasses} from "plain-design-composition";
+import {Select} from "../Select";
+import {Icon} from "../Icon";
+import './object.scss';
+import {iObjectCompositionParam, ObjectEmitsOption, ObjectPropsOption} from "./object.utils";
+import {createObjectHooks} from "./createObjectHooks";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {createObjectRenderMultiple} from "./createObjectRender.multiple";
+import {createObjectRenderSingle} from "./createObjectRender.single";
+import {$configuration} from "../$configuration";
+import {debounce} from "plain-utils/utils/debounce";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {eFilterOperator} from "../FilterService/utils/filter.service.utils";
+import {useEdit} from "../../uses/useEdit";
+import {stopPopup} from "../usePopup/utils/stopPopup";
+
+export const _Object = designComponent({
+  name: '-object',
+  inheritPropsType: Select,
+  props: ObjectPropsOption,
+  emits: ObjectEmitsOption,
+  setup({ props, event }) {
+
+    const { editComputed } = useEdit();
+
+    const { effects } = createEffects();
+
+    const object = props.service || $configuration.use('object')!;
+
+    const classes = useClasses(() => [
+      getComponentCls('object')
+    ]);
+
+    const handler = {
+      onClickSuffixIcon: (e: iMouseEvent) => {
+        // e.stopPropagation()
+        /*object，点击搜索图标打开弹窗选择的时候，不阻止事件冒泡，而是通过标记函数stopPopper来实现阻止Select打开popper*/
+        stopPopup(e);
+        hooks.onClickSuffixIcon.exec(e);
+      },
+    };
+
+    const inputSlots = {
+      suffix: () => {
+        return <span className="object-icon" onClick={handler.onClickSuffixIcon}><Icon icon="pi-search"/></span>;
+      },
+    };
+
+    const hooks = createObjectHooks();
+
+    const loading = reactive({ value: false });
+
+    const loadData: iObjectCompositionParam['loadData'] = debounce(async (filterText, handler) => {
+      const { effects } = createEffects();
+      const { option } = props;
+      /*查询的字段，目前仅支持单字段查询*/
+      const queryField = props.queryField || props.labelField;
+
+      /*清空掉其他的筛选参数*/
+      option.filterState.clearAll(false);
+
+      /*临时加上queryField字段的筛选参数，请求成功或者失败之后将这个参数移除*/
+      effects.push(
+        option.hooks.onQueryParam.use(() => {
+          return { all: true, queries: [{ field: queryField, value: filterText, operator: eFilterOperator.like, }], };
+        })
+      );
+      loading.value = true;
+      effects.push(() => {loading.value = false;});
+      try {
+        /*开启架子啊状态*/
+        const data = await option.methods.pageMethods.load({ awaitInit: false });
+        if (!!data) {
+          handler(data.list.map((i) => ({ label: i[props.labelField], val: i[props.keyField], data: i })));
+        }
+      } finally {
+        effects.clear();
+      }
+    }, 300);
+
+    const param: iObjectCompositionParam = {
+      props,
+      event,
+      hooks,
+      inputSlots,
+      classes: classes as any,
+      object,
+      loading,
+      loadData,
+      editComputed,
+    };
+
+    useWatchAutoClear(() => props.multiple, multiple => multiple ? createObjectRenderMultiple(param) : createObjectRenderSingle(param));
+
+    effects.push(hooks.onFocus.use(e => {event.emit.onFocus(e);}));
+    effects.push(hooks.onBlur.use(e => {event.emit.onBlur(e);}));
+
+    onBeforeUnmount(() => {effects.clear();});
+
+    return () => (hooks.onRender.exec());
+  },
+});
+
+export default _Object;

package/src/packages/components/Object/object.scss

@@ -1,11 +1,18 @@
-@include comp(object) {
-  .object-icon {
-    cursor: pointer;
-    padding-right: calc(#{plv(input-padding-x)} - 4px);
-    padding-left: calc(#{plv(input-padding-x)} - 4px);
-
-    &:active {
-      background-color: plv(secondary-light-2);
-    }
-  }
-}
+@include comp(object) {
+  .object-icon {
+    cursor: pointer;
+
+    &:active {
+      background-color: plv(secondary-light-2);
+    }
+  }
+  @include sizeMixin(input, ()) {
+    span.object-icon {
+      width: calc(#{$height} - 2px);
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}