plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,289 @@
+import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {Select} from "../Select";
+import {computed, reactive, useModel, useRefs} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {delay} from "plain-utils/utils/delay";
+import {SelectOption} from "../SelectOption";
+import {iSelectProps} from "../Select/select.utils";
+import i18n from "../i18n";
+
+/**
+ * 渲染对象选择框多选
+ * @author  韦胜健
+ * @date    2023.1.25 14:49
+ */
+export function createObjectRenderMultiple(
+  { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
+) {
+  const { effects } = createEffects();
+
+  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
+    /**
+     * 当绑定值变化时重新计算select.state.value，更新选中的选项状态
+     * @author  韦胜健
+     * @date    2023.1.25 14:50
+     */
+    onChange: async (newVal, oldVal) => {
+      if (!!newVal && !newVal.length) {newVal = null;}
+      if (!!oldVal && !oldVal.length) {oldVal = null;}
+      if (newVal == oldVal && newVal == null) {return;}
+      if (!!newVal && !!oldVal && newVal.length === oldVal.length && newVal.every(i => !!oldVal!.find(j => j[props.keyField] === i[props.keyField]))) {return;}
+      await delay();
+      selectHandler.reset();
+    }
+  });
+
+  const { refs, onRef } = useRefs({ select: Select });
+
+  const publicHandler = {
+    /**
+     * 清空值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onClear: () => {
+      model.value = null;
+      selectHandler.reset();
+    },
+    /**
+     * 应用新值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onSelect: (selected: PlainObject[] | null | undefined) => {
+      if (!selected) {
+        publicHandler.onClear();
+      } else {
+        model.value = [...selected];
+      }
+      /*更新选中选项的状态*/
+      selectHandler.state.value = (model.value || []).map(i => i[props.keyField]);
+      event.emit.onSelect(selected);
+    },
+  };
+
+  const inputHandler = (() => {
+    const state = reactive({
+      /*多值输入框的绑定输入文本*/
+      multipleText: null as null | string,
+    });
+    const handler = {
+      /*处理获取焦点动作*/
+      onFocus: (e: FocusEvent) => {
+        hooks.onFocus.exec(e);
+      },
+      /*处理失去焦点动作*/
+      onBlur: (e: FocusEvent) => {
+        state.multipleText = null;
+        hooks.onBlur.exec(e);
+      },
+      /*处理输入值变化动作，如果没有禁用输入搜索，则立即开启加载状态*/
+      onUpdateMultipleText: (val: string | null) => {
+        if (props.disableFilter) {return;}
+        loading.value = !!val && !!val.trim().length;
+        state.multipleText = val;
+        hooks.onInputChange.exec(val);
+      },
+      /**
+       * 处理回车添加标签的动作，这里不做任何处理在回车事件中处理选中/取消选中当前元素
+       * @author  韦胜健
+       * @date    2023.1.25 14:47
+       */
+      handleAddTag: () => {return new Promise<void>(() => null);},
+      /**
+       * 处理移除标签动作
+       * @author  韦胜健
+       * @date    2023.1.25 14:47
+       */
+      handleRemoveTag: async (data: { index: number }) => {
+        /**
+         * 这里之所以要await delay；原因是因为如果直接删除这个option的话，会导致这个option所对应的multiple input tag消失
+         * 导致useClickOutside在判断的时候检测到  点击的close icon不是reference的子节点从而关闭popper。
+         * 这样做的原因就是避免在delete元素的时候关闭popper
+         * @author  韦胜健
+         * @date    2022/8/9 11:29
+         */
+        await delay();
+        const modelValue = [...model.value!];
+        modelValue.splice(data.index, 1);
+        publicHandler.onSelect(modelValue);
+      },
+    };
+    const inputAttrs = computed(() => {
+      /*当前选中数据的显示值*/
+      const label = props.modelValue;
+      /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
+      const placeholder = props.placeholder;
+      /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
+      const multipleText = !props.disableFilter ? state.multipleText : label;
+      /*显示的数组文本*/
+      const inputValue = model.value?.map(i => i[props.labelField]);
+
+      return ({
+        ...handler,
+        multiple: true,
+        multipleText: multipleText,
+        placeholder,
+        modelValue: inputValue,
+        customReadonly: false,
+        loading: false,
+        clearHandler: publicHandler.onClear
+      });
+    });
+    return { state, inputAttrs };
+  })();
+
+  const selectHandler = (() => {
+
+    /**
+     * 重置Select的绑定值以及选项
+     * @author  韦胜健
+     * @date    2023.1.25 14:52
+     */
+    const getSelectValue = (): { value: string[] | null, option: iObjectSelectOption[] | null } => {
+      return !model.value || !model.value.length ? {
+        value: null,
+        option: null,
+      } : {
+        value: model.value.map(i => i[props.keyField]),
+        option: null,
+      };
+    };
+
+    const state = reactive(getSelectValue());
+
+    const reset = () => {Object.assign(state, getSelectValue());};
+
+    /**
+     * 输入搜索关键词的时候查询匹配的选项并且更新为Select的选项子组件
+     * @author  韦胜健
+     * @date    2023.1.25 14:53
+     */
+    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.multipleText = null;},
+      /*popper关闭的时候，重置绑定值；不能在这里重置 inputHandler.state.inputValue，因为当选中select选项的时候也会触发onClose动作*/
+      onClose: () => {Object.assign(state, getSelectValue());},
+    };
+
+    /*监听select的选中选项动作*/
+    const onSelectChange = (codes: string[] | null) => {
+      const list = (state.option || []).map(i => i.data!);
+      const modelValue = [...model.value || []];
+      const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+      const externalValue = !codes ? [] : list.filter(i => codes!.indexOf(i[props.keyField]) > -1);
+
+      publicHandler.onSelect([...leafValue, ...externalValue]);
+    };
+    const checkHandler: Partial<iSelectProps> = {
+      /**
+       * 全选当前列表
+       * @author  韦胜健
+       * @date    2023.1.25 14:11
+       */
+      handleCheckAll: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue, ...list,]);
+      },
+      /**
+       * 清空当前列表的选中
+       * @author  韦胜健
+       * @date    2023.1.25 14:11
+       */
+      handleUncheckAll: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue,]);
+      },
+      /**
+       * 反选当前列表
+       * @author  韦胜健
+       * @date    2023.1.25 14:12
+       */
+      handleCheckReverse: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+        const externalValue = list.filter(i => modelValue.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue, ...externalValue]);
+      },
+    };
+    /*监听popper的部分参数*/
+    const popperAttrs = computed(() => ({ ...handler, }));
+
+    /*给select传递的属性*/
+    const selectAttrs = computed(() => ({
+      ...checkHandler,
+      modelValue: state.value,
+      onUpdateModelValue: onSelectChange,
+      multiple: true,
+      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.multipleText && state.option == null ? (props.searchPlaceholder || i18n('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
+    }));
+    return { state, popperAttrs, onSelectChange, selectAttrs, reset };
+
+  })();
+
+  /**
+   * 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: model.value!, multiple: true, });
+      publicHandler.onSelect(selected);
+      selectHandler.reset();
+      event.emit.onPick(selected);
+    };
+
+    /*点击后缀图标的时候，打开选择弹窗*/
+    effects.push(hooks.onClickSuffixIcon.use(() => {editComputed.value.editable && pick();}));
+
+    return { pick };
+  })();
+
+  effects.push(
+    hooks.onRender.use({
+      processor: ({ list, render }) => {list.push({ render, key: 'multiple', seq: 1 });},
+      render: () => (
+        <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/createObjectRender.single.tsx

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

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

@@ -0,0 +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;

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

@@ -0,0 +1,11 @@
+@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);
+    }
+  }
+}

package/src/packages/components/Object/object.utils.ts

@@ -0,0 +1,54 @@
+import {ComponentEvent, ExtractPropTypes, PropType} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {iObjectServicePickConfig} from "../$object/object.service.utils";
+import {iObjectService} from "../$object/createObjectService";
+import {iObjectHooks} from "./createObjectHooks";
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+
+export const ObjectPropsOption = {
+  ...EditProps,
+  modelValue: { type: [Array, String, Number] as PropType<any[] | string | number> },       // 双向绑定值，单选的时候是显示值，多选时为绑定的数组
+  option: { type: Object as PropType<TableOptionSpace.iTableOption>, required: true },                       // TableOption对象
+  row: { type: Object as PropType<PlainObject> },                                           // 行对象或者说是表单对象，单选完毕时会根据map将选中行的字段值更新到row对象上
+  map: { type: Object as PropType<iObjectServicePickConfig['map']> },                       // 映射关系，选择完毕时会根据map将值映射到结果对象中
+  multiple: { type: Boolean },                                                              // 是否为多选
+  service: { type: Object as PropType<iObjectService> },                                    // 自定义服务
+  config: { type: Object as PropType<iObjectServicePickConfig> },                           // 自定义服务配置
+  labelField: { type: String, required: true },                                             // 选中数据中用来显示的字段名
+  keyField: { type: String, default: 'id' },                                                // 选中数据中用来做唯一标识的字段名
+  queryField: { type: String as PropType<string> },                                         // 输入查询时的字段名
+  disableFilter: { type: Boolean },                                                         // 禁用输入搜索
+  searchPlaceholder: { type: String },                                                      // 输入搜索关键词提示
+  beforeOpenPicker: { type: Function as PropType<() => void | Promise<void>> },             // 打开object弹窗之前
+} as const;
+
+export type iObjectPropsType = ExtractPropTypes<typeof ObjectPropsOption>
+
+export const ObjectEmitsOption = {
+  onUpdateModelValue: (val?: string | number | any[]) => true,
+  onFocus: (e: FocusEvent) => true,
+  onBlur: (e: FocusEvent) => true,
+  onSelect: (selected: any) => true,
+  onPick: (selected: any) => true,
+} as const;
+
+export type iObjectEventType = ComponentEvent<typeof ObjectEmitsOption>
+
+export interface iObjectSelectOption {
+  label: string,
+  val: string,
+  data: PlainObject
+}
+
+export type iObjectCompositionParam = {
+  props: iObjectPropsType,
+  event: iObjectEventType,
+  hooks: iObjectHooks,
+  inputSlots: PlainObject,
+  classes: { value: any[] },
+  object: iObjectService,
+  loadData: (filterText: string, handler: (options: iObjectSelectOption[]) => void) => void,
+  loading: { value: boolean },
+  editComputed: tEditComputed,
+}

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

@@ -0,0 +1,5 @@
+import OuterOperation from "../Table/standard/PlcOperation/OuterOperation";
+
+export default OuterOperation;
+
+export {OuterOperation};