@piying/view-vue 2.10.0 → 2.10.2

package/index.js

@@ -1,5 +1,5 @@
 import { inject, shallowRef, watchEffect, defineComponent, computed, createBlock, renderSlot, openBlock, resolveDynamicComponent, mergeProps, unref, toHandlers, withCtx, createVNode, normalizeProps, guardReactiveProps, defineAsyncComponent, provide, watch, onUnmounted, createElementBlock, createCommentVNode, Fragment, ref, renderList } from "vue";
-import { CoreSchemaHandle, FormBuilder, isLazyMark, getLazyImport, isFieldControl, createViewControlLink, convert, initListen, setComponent, actions, NFCSchema } from "@piying/view-core";
+import { isLazyMark, getLazyImport, isFieldControl, createViewControlLink, FormBuilder, CoreSchemaHandle, createConvertToField, initListen, setComponent, actions, NFCSchema } from "@piying/view-core";
 import { effect, createRootInjector, ChangeDetectionSchedulerImpl, ChangeDetectionScheduler, createInjector, untracked } from "static-injector";
 var store;
 // @__NO_SIDE_EFFECTS__
@@ -127,15 +127,8 @@ function pipe(...pipe2) {
     }
   };
 }
-class VueSchemaHandle extends CoreSchemaHandle {
-}
-class VueFormBuilder extends FormBuilder {
-}
 const InjectorToken = /* @__PURE__ */ Symbol();
 const PI_VIEW_FIELD_TOKEN = /* @__PURE__ */ Symbol();
-const PI_INPUT_OPTIONS_TOKEN = /* @__PURE__ */ Symbol();
-const PI_INPUT_SCHEMA_TOKEN = /* @__PURE__ */ Symbol();
-const PI_INPUT_MODEL_TOKEN = /* @__PURE__ */ Symbol();
 function signalToRef(value) {
   const injector = inject(InjectorToken);
   const dataRef = shallowRef(void 0);
@@ -156,7 +149,7 @@ function signalToRef(value) {
   });
   return dataRef;
 }
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "wrapper",
   props: {
     wrappers: {}
@@ -170,7 +163,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return wrapper.value ? (openBlock(), createBlock(resolveDynamicComponent(wrapper.value.type), mergeProps({ key: 0 }, unref(inputs), toHandlers(outputs.value)), {
         default: withCtx(() => [
-          createVNode(_sfc_main$3, normalizeProps(guardReactiveProps({ wrappers: restWrappers.value })), {
+          createVNode(_sfc_main$4, normalizeProps(guardReactiveProps({ wrappers: restWrappers.value })), {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
             ]),
@@ -182,28 +175,32 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "field-template",
   props: {
-    field: {}
+    field: {},
+    path: {}
   },
   setup(__props) {
     const props = __props;
+    const field = computed(() => {
+      const keyPath = props.path;
+      return keyPath ? props.field.get(keyPath) : props.field;
+    });
     const injector = inject(InjectorToken);
-    const renderConfig = signalToRef(() => props.field.renderConfig());
-    const inputs = signalToRef(() => props.field.inputs?.());
-    const attributes = signalToRef(() => props.field.attributes?.());
+    const renderConfig = signalToRef(() => field.value.renderConfig());
+    const inputs = signalToRef(() => field.value.inputs?.());
+    const attributes = signalToRef(() => field.value.attributes?.());
     const fieldInput = computed(() => ({ ...attributes.value, ...inputs.value }));
-    const outputs = signalToRef(() => props.field.outputs?.());
-    const events = signalToRef(() => props.field.events?.());
+    const outputs = signalToRef(() => field.value.outputs?.());
+    const events = signalToRef(() => field.value.events?.());
     const fieldOutput = computed(() => ({ ...outputs.value, ...events.value }));
-    const fieldChildren = signalToRef(() => props.field.children?.());
-    const wrappers = signalToRef(() => props.field.wrappers());
-    const define = signalToRef(() => props.field.define?.());
+    const fieldChildren = signalToRef(() => field.value.children?.());
+    const wrappers = signalToRef(() => field.value.wrappers());
+    const define = signalToRef(() => field.value.define?.());
     const componentType = computed(
       () => typeof define.value?.type === "function" || isLazyMark(define.value?.type) ? defineAsyncComponent(getLazyImport(define.value?.type)) : define.value?.type
     );
-    const field = computed(() => props.field);
     provide(PI_VIEW_FIELD_TOKEN, field);
     const childRef = shallowRef(null);
     const isControl = isFieldControl(field.value.form.control);
@@ -224,7 +221,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return !unref(renderConfig).hidden ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        unref(define)?.type ? (openBlock(), createBlock(_sfc_main$3, {
+        unref(define)?.type ? (openBlock(), createBlock(_sfc_main$4, {
           key: 0,
           wrappers: unref(wrappers)
         }, {
@@ -242,7 +239,26 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+class VueFormBuilder extends FormBuilder {
+}
+class VueSchemaHandle extends CoreSchemaHandle {
+}
+const DefaultConvertOptions = {
+  builder: VueFormBuilder,
+  handle: VueSchemaHandle
+};
+const convertToField = createConvertToField(
+  DefaultConvertOptions,
+  createRootInjector({
+    providers: [
+      {
+        provide: ChangeDetectionScheduler,
+        useClass: ChangeDetectionSchedulerImpl
+      }
+    ]
+  })
+);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "piying-view",
   props: {
     schema: {},
@@ -265,18 +281,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       })
     );
     provide(InjectorToken, rootInjector);
-    provide(
-      PI_INPUT_OPTIONS_TOKEN,
-      computed(() => inputs.options)
-    );
-    provide(
-      PI_INPUT_SCHEMA_TOKEN,
-      computed(() => inputs.schema)
-    );
-    provide(
-      PI_INPUT_MODEL_TOKEN,
-      computed(() => inputs.modelValue)
-    );
     const initResult = shallowRef();
     watch(
       () => [inputs.schema, inputs.options, rootInjector.value],
@@ -285,12 +289,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onCleanup(() => {
           subInjector.destroy();
         });
-        const field2 = convert(inputs.schema, {
-          ...inputs.options,
-          handle: VueSchemaHandle,
-          builder: VueFormBuilder,
-          injector: subInjector
-        });
+        const field2 = convertToField(
+          () => inputs.schema,
+          subInjector,
+          () => inputs.options
+        );
         initResult.value = [field2, subInjector];
       },
       { immediate: true }
@@ -317,7 +320,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$2, {
+      return openBlock(), createBlock(_sfc_main$3, {
         field: field.value
       }, null, 8, ["field"]);
     };
@@ -506,14 +509,14 @@ function typedComponent(input) {
     }
   };
 }
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "group",
   setup(__props) {
     const field = inject(PI_VIEW_FIELD_TOKEN);
     const children = signalToRef(() => field?.value.children());
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (field2, index) => {
-        return openBlock(), createBlock(_sfc_main$2, {
+        return openBlock(), createBlock(_sfc_main$3, {
           key: index,
           field: field2
         }, null, 8, ["field"]);
@@ -521,15 +524,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "field-control-bind",
+  props: {
+    field: {},
+    path: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resolvedField = computed(() => {
+      const keyPath = props.path;
+      return keyPath ? props.field.get(keyPath) : props.field;
+    });
+    let dispose;
+    const { cva, cvaa } = useControlValueAccessor();
+    watch(
+      [resolvedField],
+      ([field]) => {
+        dispose?.();
+        if (field?.form?.control) {
+          const control = field.form.control;
+          if (!control) {
+            throw new Error(`📍 fieldControlBind:[${field.keyPath || ""}]->[${props.path || ""}]❗`);
+          }
+          if (!isFieldControl(control)) {
+            throw new Error(`🏷️ fieldControl❗`);
+          }
+          dispose = createViewControlLink(() => control, cva, field.injector);
+        }
+      },
+      { immediate: true }
+    );
+    onUnmounted(() => {
+      dispose?.(true);
+      dispose = void 0;
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", {
+        cvaa: unref(cvaa),
+        field: resolvedField.value
+      });
+    };
+  }
+});
 export {
+  _sfc_main as Field,
   InjectorToken,
-  PI_INPUT_MODEL_TOKEN,
-  PI_INPUT_OPTIONS_TOKEN,
-  PI_INPUT_SCHEMA_TOKEN,
   PI_VIEW_FIELD_TOKEN,
-  _sfc_main$2 as PiyingFieldTemplate,
-  _sfc_main$1 as PiyingView,
-  _sfc_main as PiyingViewGroup,
+  _sfc_main as PiyingFieldControlBind,
+  _sfc_main$3 as PiyingFieldTemplate,
+  _sfc_main$2 as PiyingView,
+  _sfc_main$1 as PiyingViewGroup,
   VueFormBuilder,
   VueSchemaHandle,
   signalToRef,