@effect-app/vue-components 0.15.1 → 0.15.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types/components/OmegaForm/OmegaArray.vue.d.ts +1 -0
- package/dist/vue-components.es13.js +1 -1
- package/dist/vue-components.es24.js +90 -11
- package/dist/vue-components.es25.js +11 -90
- package/dist/vue-components.es26.js +1 -1
- package/dist/vue-components.es4.js +1 -1
- package/dist/vue-components.es7.js +34 -28
- package/package.json +1 -1
- package/src/components/OmegaForm/OmegaArray.vue +29 -26
|
@@ -12,6 +12,7 @@ declare const _default: <From extends Record<PropertyKey, any>, To extends Recor
|
|
|
12
12
|
subField: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
|
|
13
13
|
subState: import("@tanstack/vue-form").FieldState<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
|
|
14
14
|
index: number;
|
|
15
|
+
field: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
|
|
15
16
|
}) => any;
|
|
16
17
|
} & {
|
|
17
18
|
field?: (props: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as w, computed as f, onBeforeMount as E, watch as j, createElementBlock as v, openBlock as b, withModifiers as F, createElementVNode as M, unref as c, renderSlot as p, createCommentVNode as k, Fragment as V } from "vue";
|
|
2
2
|
import { useStore as g } from "@tanstack/vue-form";
|
|
3
|
-
import { getOmegaStore as B } from "./vue-components.
|
|
3
|
+
import { getOmegaStore as B } from "./vue-components.es25.js";
|
|
4
4
|
import { provideOmegaErrors as C } from "./vue-components.es8.js";
|
|
5
5
|
import { useOmegaForm as I } from "./vue-components.es9.js";
|
|
6
6
|
const $ = ["disabled"], N = /* @__PURE__ */ w({
|
|
@@ -1,13 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
import { computed as f } from "vue";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
import { defineComponent as w, getCurrentInstance as x, useId as C, computed as a, watch as f, nextTick as N, onMounted as d, ref as $, watchEffect as k, renderSlot as B, normalizeProps as I, guardReactiveProps as O, createElementVNode as _, normalizeClass as q, createBlock as L, createCommentVNode as P, unref as F, openBlock as S, mergeProps as T } from "vue";
|
|
3
|
+
import { useStore as z } from "@tanstack/vue-form";
|
|
4
|
+
import { useOmegaErrors as A } from "./vue-components.es8.js";
|
|
5
|
+
import D from "./vue-components.es27.js";
|
|
6
|
+
|
|
7
|
+
const J = /* @__PURE__ */ w({
|
|
8
|
+
inheritAttrs: !1,
|
|
9
|
+
__name: "OmegaInternalInput",
|
|
10
|
+
props: {
|
|
11
|
+
field: {},
|
|
12
|
+
meta: {},
|
|
13
|
+
label: {},
|
|
14
|
+
options: {},
|
|
15
|
+
type: {},
|
|
16
|
+
validators: {}
|
|
17
|
+
},
|
|
18
|
+
setup(c) {
|
|
19
|
+
const e = c, v = x()?.appContext.components.VTextField, l = C(), o = e.field, r = z(o.store, (t) => t), m = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), n = a(() => r.value.value), g = a(
|
|
20
|
+
() => (
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
+
r.value.meta.errors.map((t) => t?.message).filter(Boolean)
|
|
23
|
+
)
|
|
24
|
+
), y = (t) => t == null || t === !1 || t === "" || Number.isNaN(t);
|
|
25
|
+
f(
|
|
26
|
+
() => !!n.value,
|
|
27
|
+
() => {
|
|
28
|
+
y(n.value) && e.meta?.type !== "boolean" && N(() => {
|
|
29
|
+
o.setValue(
|
|
30
|
+
e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
|
|
31
|
+
);
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
), d(() => {
|
|
35
|
+
!n.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null" && o.setValue(null);
|
|
36
|
+
});
|
|
37
|
+
const { addError: h, removeError: b, showErrors: E, showErrorsOn: V } = A(), s = $(!1);
|
|
38
|
+
k(() => {
|
|
39
|
+
(E.value || V === "onChange") && (s.value = !0);
|
|
40
|
+
});
|
|
41
|
+
const u = () => {
|
|
42
|
+
s.value = !0;
|
|
43
|
+
};
|
|
44
|
+
d(() => {
|
|
45
|
+
n.value && u();
|
|
46
|
+
});
|
|
47
|
+
const p = a(() => !s.value && m.value !== "select" ? [] : g.value);
|
|
48
|
+
f(
|
|
49
|
+
() => r.value.meta.errors,
|
|
50
|
+
() => {
|
|
51
|
+
r.value.meta.errors.length ? h({
|
|
52
|
+
inputId: l,
|
|
53
|
+
errors: r.value.meta.errors.map((t) => t.message).filter(Boolean),
|
|
54
|
+
label: e.label
|
|
55
|
+
}) : b(l);
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
const i = a(() => ({
|
|
59
|
+
id: l,
|
|
60
|
+
required: e.meta?.required,
|
|
61
|
+
minLength: e.meta?.type === "string" && e.meta?.minLength,
|
|
62
|
+
maxLength: e.meta?.type === "string" && e.meta?.maxLength,
|
|
63
|
+
max: e.meta?.type === "number" && e.meta?.maximum,
|
|
64
|
+
min: e.meta?.type === "number" && e.meta?.minimum,
|
|
65
|
+
name: e.field.name,
|
|
66
|
+
modelValue: e.field.state.value,
|
|
67
|
+
errorMessages: p.value,
|
|
68
|
+
error: !!p.value.length,
|
|
69
|
+
field: e.field,
|
|
70
|
+
setRealDirty: u,
|
|
71
|
+
type: m.value,
|
|
72
|
+
label: `${e.label}${e.meta?.required ? " *" : ""}`,
|
|
73
|
+
options: e.options
|
|
74
|
+
}));
|
|
75
|
+
return (t, R) => B(t.$slots, "default", I(O(i.value)), () => [
|
|
76
|
+
_("div", {
|
|
77
|
+
class: q(t.$attrs.class),
|
|
78
|
+
onFocusout: u
|
|
79
|
+
}, [
|
|
80
|
+
F(v) ? (S(), L(D, T({
|
|
81
|
+
key: 0,
|
|
82
|
+
"input-props": i.value
|
|
83
|
+
}, t.$attrs, {
|
|
84
|
+
"vuetify-value": i.value.field.state.value
|
|
85
|
+
}), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
|
|
86
|
+
], 34)
|
|
87
|
+
]);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
11
90
|
export {
|
|
12
|
-
|
|
91
|
+
J as default
|
|
13
92
|
};
|
|
@@ -1,92 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
field: {},
|
|
12
|
-
meta: {},
|
|
13
|
-
label: {},
|
|
14
|
-
options: {},
|
|
15
|
-
type: {},
|
|
16
|
-
validators: {}
|
|
17
|
-
},
|
|
18
|
-
setup(c) {
|
|
19
|
-
const e = c, v = x()?.appContext.components.VTextField, l = C(), o = e.field, r = z(o.store, (t) => t), m = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), n = a(() => r.value.value), g = a(
|
|
20
|
-
() => (
|
|
21
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
-
r.value.meta.errors.map((t) => t?.message).filter(Boolean)
|
|
23
|
-
)
|
|
24
|
-
), y = (t) => t == null || t === !1 || t === "" || Number.isNaN(t);
|
|
25
|
-
f(
|
|
26
|
-
() => !!n.value,
|
|
27
|
-
() => {
|
|
28
|
-
y(n.value) && e.meta?.type !== "boolean" && N(() => {
|
|
29
|
-
o.setValue(
|
|
30
|
-
e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
|
|
31
|
-
);
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
), d(() => {
|
|
35
|
-
!n.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null" && o.setValue(null);
|
|
36
|
-
});
|
|
37
|
-
const { addError: h, removeError: b, showErrors: E, showErrorsOn: V } = A(), s = $(!1);
|
|
38
|
-
k(() => {
|
|
39
|
-
(E.value || V === "onChange") && (s.value = !0);
|
|
40
|
-
});
|
|
41
|
-
const u = () => {
|
|
42
|
-
s.value = !0;
|
|
43
|
-
};
|
|
44
|
-
d(() => {
|
|
45
|
-
n.value && u();
|
|
46
|
-
});
|
|
47
|
-
const p = a(() => !s.value && m.value !== "select" ? [] : g.value);
|
|
48
|
-
f(
|
|
49
|
-
() => r.value.meta.errors,
|
|
50
|
-
() => {
|
|
51
|
-
r.value.meta.errors.length ? h({
|
|
52
|
-
inputId: l,
|
|
53
|
-
errors: r.value.meta.errors.map((t) => t.message).filter(Boolean),
|
|
54
|
-
label: e.label
|
|
55
|
-
}) : b(l);
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
const i = a(() => ({
|
|
59
|
-
id: l,
|
|
60
|
-
required: e.meta?.required,
|
|
61
|
-
minLength: e.meta?.type === "string" && e.meta?.minLength,
|
|
62
|
-
maxLength: e.meta?.type === "string" && e.meta?.maxLength,
|
|
63
|
-
max: e.meta?.type === "number" && e.meta?.maximum,
|
|
64
|
-
min: e.meta?.type === "number" && e.meta?.minimum,
|
|
65
|
-
name: e.field.name,
|
|
66
|
-
modelValue: e.field.state.value,
|
|
67
|
-
errorMessages: p.value,
|
|
68
|
-
error: !!p.value.length,
|
|
69
|
-
field: e.field,
|
|
70
|
-
setRealDirty: u,
|
|
71
|
-
type: m.value,
|
|
72
|
-
label: `${e.label}${e.meta?.required ? " *" : ""}`,
|
|
73
|
-
options: e.options
|
|
74
|
-
}));
|
|
75
|
-
return (t, R) => B(t.$slots, "default", I(O(i.value)), () => [
|
|
76
|
-
_("div", {
|
|
77
|
-
class: q(t.$attrs.class),
|
|
78
|
-
onFocusout: u
|
|
79
|
-
}, [
|
|
80
|
-
F(v) ? (S(), L(D, T({
|
|
81
|
-
key: 0,
|
|
82
|
-
"input-props": i.value
|
|
83
|
-
}, t.$attrs, {
|
|
84
|
-
"vuetify-value": i.value.field.state.value
|
|
85
|
-
}), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
|
|
86
|
-
], 34)
|
|
87
|
-
]);
|
|
88
|
-
}
|
|
89
|
-
});
|
|
1
|
+
import { useStore as u } from "@tanstack/vue-form";
|
|
2
|
+
import { computed as f } from "vue";
|
|
3
|
+
function c(o, t) {
|
|
4
|
+
return f(() => t ? u(o.store, (n) => {
|
|
5
|
+
const r = {};
|
|
6
|
+
for (const e of t)
|
|
7
|
+
r[e] = n[e];
|
|
8
|
+
return r;
|
|
9
|
+
}).value : {});
|
|
10
|
+
}
|
|
90
11
|
export {
|
|
91
|
-
|
|
12
|
+
c as getOmegaStore
|
|
92
13
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as d, inject as f, computed as r, createBlock as n, openBlock as m, resolveDynamicComponent as c, withCtx as l, createCommentVNode as v, mergeProps as y, renderSlot as g, normalizeProps as h, guardReactiveProps as b } from "vue";
|
|
2
2
|
import { generateInputStandardSchemaFromFieldMeta as C } from "./vue-components.es10.js";
|
|
3
|
-
import F from "./vue-components.
|
|
3
|
+
import F from "./vue-components.es24.js";
|
|
4
4
|
const P = /* @__PURE__ */ d({
|
|
5
5
|
inheritAttrs: !1,
|
|
6
6
|
__name: "OmegaInput",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as y, computed as s, onMounted as h, provide as F, createBlock as l, openBlock as o, resolveDynamicComponent as u, withCtx as d, createElementBlock as $, renderSlot as f, Fragment as M, renderList as P, mergeProps as k, normalizeProps as A, guardReactiveProps as b } from "vue";
|
|
2
|
+
const I = /* @__PURE__ */ y({
|
|
3
3
|
inheritAttrs: !1,
|
|
4
4
|
__name: "OmegaArray",
|
|
5
5
|
props: {
|
|
@@ -8,38 +8,44 @@ const B = /* @__PURE__ */ F({
|
|
|
8
8
|
defaultItems: {},
|
|
9
9
|
items: {}
|
|
10
10
|
},
|
|
11
|
-
setup(
|
|
12
|
-
const r =
|
|
13
|
-
|
|
11
|
+
setup(i) {
|
|
12
|
+
const r = i, c = r.form.useStore((e) => e.values), m = s(() => {
|
|
13
|
+
const e = r.name.replace(/\[/g, ".").replace(/\]/g, "");
|
|
14
|
+
try {
|
|
15
|
+
return e.split(".").reduce((a, t) => a[t], c.value);
|
|
16
|
+
} catch {
|
|
17
|
+
return [];
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
h(async () => {
|
|
14
21
|
r.defaultItems && !m.value && r.form.setFieldValue(r.name, r.defaultItems);
|
|
15
22
|
});
|
|
16
|
-
const
|
|
23
|
+
const p = s(() => (a) => {
|
|
17
24
|
const t = a.replace(/\[\d+\]/g, "");
|
|
18
25
|
return r.form.meta[t];
|
|
19
26
|
});
|
|
20
|
-
return
|
|
21
|
-
(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
], 64));
|
|
27
|
+
return F("getMetaFromArray", p), (e, a) => (o(), l(u(e.form.Field), { name: e.name }, {
|
|
28
|
+
default: d(({ field: t }) => [
|
|
29
|
+
(o(!0), $(M, null, P(m.value, (B, n) => (o(), l(u(e.form.Field), {
|
|
30
|
+
key: `${e.name}[${Number(n)}]`,
|
|
31
|
+
name: `${e.name}[${Number(n)}]`
|
|
32
|
+
}, {
|
|
33
|
+
default: d(({ field: g, state: v }) => [
|
|
34
|
+
f(e.$slots, "default", k({ ref_for: !0 }, {
|
|
35
|
+
subField: g,
|
|
36
|
+
subState: v,
|
|
37
|
+
index: Number(n),
|
|
38
|
+
field: t
|
|
39
|
+
}))
|
|
40
|
+
]),
|
|
41
|
+
_: 2
|
|
42
|
+
}, 1032, ["name"]))), 128)),
|
|
43
|
+
f(e.$slots, "field", A(b({ field: t })))
|
|
44
|
+
]),
|
|
45
|
+
_: 3
|
|
46
|
+
}, 8, ["name"]));
|
|
41
47
|
}
|
|
42
48
|
});
|
|
43
49
|
export {
|
|
44
|
-
|
|
50
|
+
I as default
|
|
45
51
|
};
|
package/package.json
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<component
|
|
3
|
-
:is="form.Field"
|
|
4
|
-
v-for="(_, i) of items"
|
|
5
|
-
:key="`${name}[${Number(i)}]`"
|
|
6
|
-
:name="
|
|
7
|
-
`${name}[${Number(i)}]` as DeepKeys<From>
|
|
8
|
-
"
|
|
9
|
-
>
|
|
10
|
-
<template #default="{ field: subField, state: subState }">
|
|
11
|
-
<slot
|
|
12
|
-
v-bind="{
|
|
13
|
-
subField,
|
|
14
|
-
subState,
|
|
15
|
-
index: Number(i),
|
|
16
|
-
}"
|
|
17
|
-
/>
|
|
18
|
-
</template>
|
|
19
|
-
</component>
|
|
20
2
|
<component :is="form.Field" :name="name">
|
|
21
3
|
<template #default="{ field }">
|
|
4
|
+
<component
|
|
5
|
+
:is="form.Field"
|
|
6
|
+
v-for="(_, i) of items"
|
|
7
|
+
:key="`${name}[${Number(i)}]`"
|
|
8
|
+
:name="
|
|
9
|
+
`${name}[${Number(i)}]` as DeepKeys<From>
|
|
10
|
+
"
|
|
11
|
+
>
|
|
12
|
+
<template #default="{ field: subField, state: subState }">
|
|
13
|
+
<slot
|
|
14
|
+
v-bind="{
|
|
15
|
+
subField,
|
|
16
|
+
subState,
|
|
17
|
+
index: Number(i),
|
|
18
|
+
field,
|
|
19
|
+
}"
|
|
20
|
+
/>
|
|
21
|
+
</template>
|
|
22
|
+
</component>
|
|
22
23
|
<slot name="field" v-bind="{ field }" />
|
|
23
24
|
</template>
|
|
24
25
|
</component>
|
|
@@ -32,9 +33,7 @@
|
|
|
32
33
|
"
|
|
33
34
|
>
|
|
34
35
|
import { computed, onMounted, provide } from "vue"
|
|
35
|
-
import {
|
|
36
|
-
type OmegaInputProps,
|
|
37
|
-
} from "./OmegaFormStuff"
|
|
36
|
+
import { type OmegaInputProps } from "./OmegaFormStuff"
|
|
38
37
|
import { type DeepValue, type DeepKeys } from "@tanstack/vue-form"
|
|
39
38
|
|
|
40
39
|
const props = defineProps<
|
|
@@ -55,9 +54,13 @@ defineOptions({
|
|
|
55
54
|
const store = props.form.useStore(state => state.values)
|
|
56
55
|
const items = computed(() => {
|
|
57
56
|
const normalizedPath = props.name.replace(/\[/g, ".").replace(/\]/g, "")
|
|
58
|
-
|
|
59
|
-
return acc
|
|
60
|
-
|
|
57
|
+
try {
|
|
58
|
+
return normalizedPath.split(".").reduce((acc, curr) => {
|
|
59
|
+
return acc[curr] as typeof store.value
|
|
60
|
+
}, store.value)
|
|
61
|
+
} catch (e) {
|
|
62
|
+
return []
|
|
63
|
+
}
|
|
61
64
|
})
|
|
62
65
|
|
|
63
66
|
onMounted(async () => {
|
|
@@ -69,11 +72,11 @@ onMounted(async () => {
|
|
|
69
72
|
const getMetaFromArray = computed(() => {
|
|
70
73
|
const getMeta = (path: string) => {
|
|
71
74
|
// Transform path like 'a[0].b[11].c' into 'a.b.c'
|
|
72
|
-
const simplifiedPath = path.replace(/\[\d+\]/g,
|
|
75
|
+
const simplifiedPath = path.replace(/\[\d+\]/g, "")
|
|
73
76
|
|
|
74
77
|
return props.form.meta[simplifiedPath as keyof typeof props.form.meta]
|
|
75
78
|
}
|
|
76
|
-
|
|
79
|
+
|
|
77
80
|
return getMeta
|
|
78
81
|
})
|
|
79
82
|
|