Fallback an exposed in Vue Composition API?

[silentmantra]

I have a table component with an exposed:

const self = {
    dispatchKeys: (e: KeyboardEvent) => (onInputKeydown(e), self),
    assign, assignRow, selectCell,
    selection,
    columns,
    get currentRowIdx() {
        return currentIdx.value;
    },
    set currentRowIdx(val) {
        if (val >= items.value.length || val < 0) {
            return;
        }
        currentIdx.value = val;
    },
    get rowCount() {
        return items.value.length
    }
};
defineExpose(self);

Works fine until I try to wrap the component into another with more high-level functionality:

<template>
  <lq-table ...... />
</template>

The problem is that the exposed is lost and I have no idea how to forward the exposed up. I've tried to expose a ref of the wrapped component, proxies, no luck. Any way to expose the child component?

[sutras]

export function createHigherOrderExpose<T = any>(
  elRef: Ref<any>,
  subCompExposeKeys: string[],
  customExpose: Record<string, any> = {},
): T {
  return new Proxy(
    [...subCompExposeKeys, ...Object.keys(customExpose)].reduce(
      (obj, key) => ((obj[key] = undefined), obj),
      {} as Record<string, any>,
    ),
    {
      get: (_, prop) => {
        if (subCompExposeKeys.includes(prop as string)) {
          return elRef.value?.[prop];
        }
        return customExpose[prop as keyof typeof customExpose];
      },
    },
  ) as T;
}

const LqTable = defineComponent({ ...{} });

const HigherOrderComponent = defineComponent({
  setup(_, { expose }) {
    const lqTableRef = ref();

    // HigherOrderComponent expose
    const customExpose = {};

    expose(
      createHigherOrderExpose(
        lqTableRef,
        [...['LqTable expose keys']],
        customExpose,
      ),
    );

    return () =>
      h(LqTable, {
        ref: lqTableRef,
      });
  },
});

使用 Proxy 来代理对子组件暴露的属性的访问，且被代理的对象的 key 必须要声明，否则会被 vue 忽略掉。
A Proxy is used to proxy access to properties exposed by child components, and the key of the proxyed object must be declared, otherwise it will be ignored by vue.