@piying/view-vue
Version:
Piying view For Vue;Valibot to Component
260 lines (259 loc) • 9.09 kB
JavaScript
import { inject, shallowRef, watchEffect, defineComponent, computed, createBlock, renderSlot, openBlock, resolveDynamicComponent, mergeProps, unref, toHandlers, withCtx, createVNode, normalizeProps, guardReactiveProps, defineAsyncComponent, provide, ref, watch, onUnmounted, createElementBlock, createCommentVNode, Fragment, renderList } from "vue";
import { CoreSchemaHandle, FormBuilder, isLazyMark, getLazyImport, isFieldControl, createViewControlLink, convert, initListen } from "@piying/view-core";
import { effect, createRootInjector, ChangeDetectionSchedulerImpl, ChangeDetectionScheduler, createInjector, DestroyRef, untracked } from "static-injector";
class VueSchemaHandle extends CoreSchemaHandle {
}
class VueFormBuilder extends FormBuilder {
}
const InjectorToken = Symbol();
const PI_VIEW_FIELD_TOKEN = Symbol();
function signalToRef(value) {
const injector = inject(InjectorToken);
const dataRef = shallowRef(void 0);
watchEffect((onWatcherCleanup) => {
dataRef.value = value();
const ref2 = effect(
() => {
const currentValue = value();
if (!Object.is(dataRef.value, currentValue)) {
dataRef.value = currentValue;
}
},
{ injector }
);
onWatcherCleanup(() => {
ref2.destroy();
});
});
return dataRef;
}
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
__name: "wrapper",
props: {
wrappers: {}
},
setup(__props) {
const dInputs = __props;
const restWrappers = computed(() => dInputs.wrappers.slice(1));
const wrapper = computed(() => dInputs.wrappers[0]);
const inputs = signalToRef(() => {
var _a, _b;
return { ...(_a = wrapper.value) == null ? void 0 : _a.inputs(), ...(_b = wrapper.value) == null ? void 0 : _b.attributes() };
});
const outputs = computed(() => {
var _a;
return ((_a = wrapper.value) == null ? void 0 : _a.outputs) ?? {};
});
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 })), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)
]),
_: 3
}, 16)) : renderSlot(_ctx.$slots, "default", { key: 1 });
};
}
});
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
__name: "field-template",
props: {
field: {}
},
setup(__props) {
const props = __props;
const injector = inject(InjectorToken);
const inputs = signalToRef(() => props.field.inputs());
const outputs = signalToRef(() => props.field.outputs());
const renderConfig = signalToRef(() => props.field.renderConfig());
const attributes = signalToRef(() => props.field.attributes());
const fieldInput = computed(() => ({ ...attributes.value, ...inputs.value }));
const fieldChildren = signalToRef(() => {
var _a, _b;
return (_b = (_a = props.field).children) == null ? void 0 : _b.call(_a);
});
const wrappers = signalToRef(() => props.field.wrappers());
const componentType = computed(
() => {
var _a, _b, _c, _d;
return typeof ((_a = props.field.define) == null ? void 0 : _a.type) === "function" || isLazyMark((_b = props.field.define) == null ? void 0 : _b.type) ? defineAsyncComponent(getLazyImport((_c = props.field.define) == null ? void 0 : _c.type)) : (_d = props.field.define) == null ? void 0 : _d.type;
}
);
const field = computed(() => props.field);
provide(PI_VIEW_FIELD_TOKEN, field);
const childRef = ref(null);
const isControl = isFieldControl(field.value.form.control);
let dispose;
watch(
[childRef, field],
([childRef2, field2]) => {
dispose == null ? void 0 : dispose();
if (isControl && childRef2) {
dispose = createViewControlLink(() => field2.form.control, childRef2["cva"], injector);
}
},
{ immediate: true }
);
onUnmounted(() => {
dispose == null ? void 0 : dispose(true);
dispose = void 0;
});
return (_ctx, _cache) => {
var _a;
return !unref(renderConfig).hidden ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
((_a = field.value.define) == null ? void 0 : _a.type) ? (openBlock(), createBlock(_sfc_main$3, {
key: 0,
wrappers: unref(wrappers)
}, {
default: withCtx(() => [
unref(fieldChildren) ? (openBlock(), createBlock(resolveDynamicComponent(componentType.value), mergeProps({ key: 0 }, fieldInput.value, toHandlers(unref(outputs))), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
field.value.form.control ? (openBlock(), createBlock(resolveDynamicComponent(componentType.value), mergeProps({ key: 0 }, fieldInput.value, toHandlers(unref(outputs)), {
ref_key: "childRef",
ref: childRef
}), null, 16)) : (openBlock(), createBlock(resolveDynamicComponent(componentType.value), mergeProps({ key: 1 }, fieldInput.value, toHandlers(unref(outputs))), null, 16))
], 64))
]),
_: 1
}, 8, ["wrappers"])) : createCommentVNode("", true)
], 64)) : createCommentVNode("", true);
};
}
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "piying-view",
props: {
schema: {},
modelValue: {},
options: {}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const dProps = __props;
const emit = __emit;
const rootInjector = createRootInjector({
providers: [
{
provide: ChangeDetectionScheduler,
useClass: ChangeDetectionSchedulerImpl
}
]
});
provide(InjectorToken, rootInjector);
let injectorDispose;
const initResult = computed(() => {
injectorDispose == null ? void 0 : injectorDispose();
const subInjector = createInjector({ providers: [], parent: rootInjector });
injectorDispose = () => {
subInjector.destroy();
injectorDispose = void 0;
};
const field2 = convert(dProps.schema, {
handle: VueSchemaHandle,
builder: VueFormBuilder,
injector: subInjector,
registerOnDestroy: (fn) => {
subInjector.get(DestroyRef).onDestroy(() => {
fn();
});
},
...dProps.options
});
return [field2, subInjector];
});
onUnmounted(() => {
injectorDispose == null ? void 0 : injectorDispose();
});
const field = computed(() => initResult.value[0]);
watch(
() => [initResult.value, dProps.modelValue],
([[field2, subInjector], modelValue], _1, onWatcherCleanup) => {
let ref2;
if (field2.form.control) {
ref2 = initListen(modelValue, field2.form.control, subInjector, (value) => {
untracked(() => {
var _a;
if ((_a = field2.form.control) == null ? void 0 : _a.valueNoError$$()) {
emit("update:modelValue", value);
}
});
});
field2.form.control.updateValue(dProps.modelValue);
}
onWatcherCleanup(() => {
ref2 == null ? void 0 : ref2.destroy();
});
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createBlock(_sfc_main$2, {
field: field.value
}, null, 8, ["field"]);
};
}
});
function useControlValueAccessor() {
const value = ref();
const disabled = ref(false);
let onChange;
let touched;
const instance = {
writeValue(obj) {
value.value = obj;
},
registerOnChange(fn) {
onChange = fn;
},
registerOnTouched(fn) {
touched = fn;
},
setDisabledState(value2) {
disabled.value = value2;
}
};
return {
cva: instance,
cvaa: {
value,
disabled,
valueChange: (input) => {
onChange(input);
value.value = input;
},
touchedChange: () => {
touched();
}
}
};
}
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "group",
setup(__props) {
const field = inject(PI_VIEW_FIELD_TOKEN);
const children = signalToRef(() => field == null ? void 0 : field.value.children());
return (_ctx, _cache) => {
return openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (field2, index) => {
return openBlock(), createBlock(_sfc_main$2, {
key: index,
field: field2
}, null, 8, ["field"]);
}), 128);
};
}
});
export {
InjectorToken,
PI_VIEW_FIELD_TOKEN,
_sfc_main$2 as PiyingFieldTemplate,
_sfc_main$1 as PiyingView,
_sfc_main as PiyingViewGroup,
VueFormBuilder,
VueSchemaHandle,
signalToRef,
useControlValueAccessor
};
//# sourceMappingURL=index.js.map