@effect-app/vue-components 0.4.6 → 0.5.0
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/OmegaFormStuff.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaWrapper.vue.d.ts +5 -5
- package/dist/types/components/OmegaForm/useOmegaForm.d.ts +1 -1
- package/dist/vue-components.es11.js +75 -42
- package/dist/vue-components.es21.js +38 -36
- package/dist/vue-components.es8.js +2 -2
- package/dist/vue-components.es9.js +2 -2
- package/package.json +1 -1
- package/src/components/OmegaForm/OmegaErrors.vue +3 -3
- package/src/components/OmegaForm/OmegaFormStuff.ts +1 -1
- package/src/components/OmegaForm/OmegaInternalInput.vue +9 -6
- package/src/components/OmegaForm/OmegaWrapper.vue +59 -12
- package/src/components/OmegaForm/useOmegaForm.ts +1 -1
- package/src/stories/OmegaForm/Clearable.vue +20 -0
- package/src/stories/OmegaForm.stories.ts +8 -0
|
@@ -32,7 +32,7 @@ export type OmegaFormParams<To, From> = FormApi<To, FormValidateOrFn<To> | undef
|
|
|
32
32
|
export type OmegaFormState<To, From> = FormState<To, FormValidateOrFn<To> | undefined, FormValidateOrFn<To> | undefined, StandardSchemaV1<To, From>, FormValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined, FormValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined>;
|
|
33
33
|
export type OmegaFormApi<To, From> = OmegaFormParams<To, From> & VueFormApi<To, FormValidateOrFn<To> | undefined, FormValidateOrFn<To> | undefined, StandardSchemaV1<To, From>, FormValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined, FormValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined, FormAsyncValidateOrFn<To> | undefined>;
|
|
34
34
|
export type FormComponent<T, S> = FieldComponent<T, FormValidateOrFn<T> | undefined, FormValidateOrFn<T> | undefined, StandardSchemaV1<T, S>, FormValidateOrFn<T> | undefined, FormAsyncValidateOrFn<T> | undefined, FormValidateOrFn<T> | undefined, FormAsyncValidateOrFn<T> | undefined, FormAsyncValidateOrFn<T> | undefined, FormAsyncValidateOrFn<T> | undefined> & Component;
|
|
35
|
-
export type FormType<T, S> = OmegaFormApi<T, S> & {
|
|
35
|
+
export type FormType<T, S = unknown> = OmegaFormApi<T, S> & {
|
|
36
36
|
Field: Component;
|
|
37
37
|
};
|
|
38
38
|
export type PrefixFromDepth<K extends string | number, _TDepth extends any[]> = K;
|
|
@@ -6,16 +6,16 @@ declare const _default: <From extends Record<PropertyKey, any>, To extends Recor
|
|
|
6
6
|
omegaConfig?: OmegaConfig<From>;
|
|
7
7
|
subscribe?: K[];
|
|
8
8
|
showErrorsOn?: ShowErrorsOn;
|
|
9
|
-
} & ({
|
|
10
|
-
form: OmegaFormReturn<To, From>;
|
|
11
|
-
schema?: undefined;
|
|
12
|
-
} | (Omit<import("@tanstack/vue-form").FormOptions<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined>, "onSubmit"> & {
|
|
9
|
+
} & Omit<import("@tanstack/vue-form").FormOptions<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined>, "onSubmit"> & ({
|
|
13
10
|
onSubmit?: ((props: {
|
|
14
11
|
formApi: import("./OmegaFormStuff").OmegaFormParams<To, From>;
|
|
15
12
|
meta: any;
|
|
16
13
|
value: From;
|
|
17
14
|
}) => Promise<any> | any) | undefined;
|
|
18
|
-
} & {
|
|
15
|
+
} & ({
|
|
16
|
+
form: OmegaFormReturn<To, From>;
|
|
17
|
+
schema?: undefined;
|
|
18
|
+
} | {
|
|
19
19
|
form?: undefined;
|
|
20
20
|
schema: S.Schema<From, To, never>;
|
|
21
21
|
}))) & Partial<{}>> & import("vue").PublicProps;
|
|
@@ -27,7 +27,7 @@ interface OF<To, From> extends OmegaFormApi<To, From> {
|
|
|
27
27
|
}
|
|
28
28
|
export declare const OmegaFormKey: InjectionKey<OF<any, any>>;
|
|
29
29
|
export interface OmegaFormReturn<To extends Record<PropertyKey, any>, From> extends OF<To, From> {
|
|
30
|
-
Input: typeof OmegaFormInput
|
|
30
|
+
Input: typeof OmegaFormInput;
|
|
31
31
|
}
|
|
32
32
|
export declare const useOmegaForm: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(schema: S.Schema<From, To, never>, tanstackFormOptions?: NoInfer<FormProps<To, From>>, omegaConfig?: OmegaConfig<From>) => OmegaFormReturn<To, From>;
|
|
33
33
|
export {};
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { useStore as
|
|
3
|
-
import { getOmegaStore as
|
|
4
|
-
import { provideOmegaErrors as
|
|
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
|
+
import { useStore as g } from "@tanstack/vue-form";
|
|
3
|
+
import { getOmegaStore as B } from "./vue-components.es22.js";
|
|
4
|
+
import { provideOmegaErrors as C } from "./vue-components.es5.js";
|
|
5
5
|
import { useOmegaForm as I } from "./vue-components.es6.js";
|
|
6
|
-
const
|
|
6
|
+
const $ = ["disabled"], N = /* @__PURE__ */ w({
|
|
7
7
|
__name: "OmegaWrapper",
|
|
8
8
|
props: {
|
|
9
9
|
omegaConfig: {},
|
|
10
10
|
subscribe: {},
|
|
11
11
|
showErrorsOn: {},
|
|
12
|
-
form: {},
|
|
13
|
-
schema: {},
|
|
14
12
|
defaultValues: {},
|
|
15
13
|
defaultState: {},
|
|
16
14
|
asyncAlways: { type: Boolean },
|
|
@@ -19,59 +17,94 @@ const k = ["disabled"], j = /* @__PURE__ */ h({
|
|
|
19
17
|
onSubmitMeta: {},
|
|
20
18
|
onSubmitInvalid: { type: Function },
|
|
21
19
|
transform: {},
|
|
22
|
-
onSubmit: { type: Function }
|
|
20
|
+
onSubmit: { type: Function },
|
|
21
|
+
form: {},
|
|
22
|
+
schema: {}
|
|
23
23
|
},
|
|
24
|
-
setup(
|
|
25
|
-
const
|
|
26
|
-
if (!(
|
|
27
|
-
return I(
|
|
28
|
-
}),
|
|
29
|
-
|
|
24
|
+
setup(O) {
|
|
25
|
+
const o = O, m = f(() => {
|
|
26
|
+
if (!(o.form || !o.schema))
|
|
27
|
+
return I(o.schema, o, o.omegaConfig);
|
|
28
|
+
}), t = f(() => o.form ?? m.value);
|
|
29
|
+
E(() => {
|
|
30
|
+
if (!o.form) return;
|
|
31
|
+
const e = Object.keys(o.form.options || {}), s = /* @__PURE__ */ new Set([
|
|
32
|
+
"omegaConfig",
|
|
33
|
+
"subscribe",
|
|
34
|
+
"showErrorsOn",
|
|
35
|
+
"asyncAlways",
|
|
36
|
+
"form",
|
|
37
|
+
"schema"
|
|
38
|
+
]), i = Object.fromEntries(
|
|
39
|
+
Object.entries(o).filter(
|
|
40
|
+
([a, u]) => !s.has(a) && u !== void 0
|
|
41
|
+
)
|
|
42
|
+
), r = Object.keys(i), n = e.filter(
|
|
43
|
+
(a) => r.includes(a) && i[a] !== void 0
|
|
44
|
+
);
|
|
45
|
+
n.length > 0 && console.warn(
|
|
46
|
+
`[OmegaWrapper] Overlapping keys found between form options and filtered props:
|
|
47
|
+
${n.join(
|
|
48
|
+
`,
|
|
49
|
+
`
|
|
50
|
+
)}.
|
|
51
|
+
Props will overwrite existing form options. This might indicate a configuration issue.`
|
|
52
|
+
);
|
|
53
|
+
const S = {
|
|
54
|
+
...t.value.options,
|
|
55
|
+
...i
|
|
56
|
+
};
|
|
57
|
+
t.value.options = Object.fromEntries(
|
|
58
|
+
Object.entries(S).filter(([a, u]) => u !== void 0)
|
|
59
|
+
);
|
|
60
|
+
});
|
|
61
|
+
const h = g(
|
|
62
|
+
t.value.store,
|
|
30
63
|
(e) => e.isSubmitting
|
|
31
|
-
),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
),
|
|
35
|
-
|
|
64
|
+
), d = B(
|
|
65
|
+
t.value,
|
|
66
|
+
o.subscribe
|
|
67
|
+
), y = g(
|
|
68
|
+
t.value.store,
|
|
36
69
|
(e) => e.submissionAttempts
|
|
37
|
-
),
|
|
38
|
-
return
|
|
39
|
-
() => [
|
|
70
|
+
), l = f(() => t.value.useStore((e) => e.errors));
|
|
71
|
+
return j(
|
|
72
|
+
() => [t.value.filterItems, l.value.value],
|
|
40
73
|
() => {
|
|
41
|
-
const e =
|
|
74
|
+
const e = t.value.filterItems, s = l.value.value;
|
|
42
75
|
return e ? s ? (Object.values(s).filter(
|
|
43
|
-
(
|
|
76
|
+
(r) => !!r
|
|
44
77
|
).flatMap(
|
|
45
|
-
(
|
|
46
|
-
).some((
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
...
|
|
78
|
+
(r) => Object.values(r).flat().map((n) => n.message)
|
|
79
|
+
).some((r) => r === e.message) && e.items.forEach((r) => {
|
|
80
|
+
const n = t.value.getFieldMeta(r);
|
|
81
|
+
n && t.value.setFieldMeta(r, {
|
|
82
|
+
...n,
|
|
50
83
|
errorMap: {
|
|
51
84
|
onSubmit: [
|
|
52
|
-
{ path: [
|
|
85
|
+
{ path: [r], message: e.message }
|
|
53
86
|
]
|
|
54
87
|
}
|
|
55
88
|
});
|
|
56
89
|
}), {}) : {} : {};
|
|
57
90
|
}
|
|
58
|
-
),
|
|
91
|
+
), C(y, l.value, o.showErrorsOn), (e, s) => (b(), v("form", {
|
|
59
92
|
novalidate: "",
|
|
60
|
-
onSubmit: s[0] || (s[0] =
|
|
93
|
+
onSubmit: s[0] || (s[0] = F((i) => t.value.handleSubmit(), ["prevent", "stop"]))
|
|
61
94
|
}, [
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
], 64)) :
|
|
95
|
+
M("fieldset", { disabled: c(h) }, [
|
|
96
|
+
o.form ? (b(), v(V, { key: 0 }, [
|
|
97
|
+
p(e.$slots, "externalForm", { subscribedValues: c(d) }, void 0, !0),
|
|
98
|
+
p(e.$slots, "default", {}, void 0, !0)
|
|
99
|
+
], 64)) : m.value ? p(e.$slots, "internalForm", {
|
|
67
100
|
key: 1,
|
|
68
|
-
form:
|
|
69
|
-
subscribedValues:
|
|
70
|
-
}, void 0, !0) :
|
|
71
|
-
], 8,
|
|
101
|
+
form: m.value,
|
|
102
|
+
subscribedValues: c(d)
|
|
103
|
+
}, void 0, !0) : k("", !0)
|
|
104
|
+
], 8, $)
|
|
72
105
|
], 32));
|
|
73
106
|
}
|
|
74
107
|
});
|
|
75
108
|
export {
|
|
76
|
-
|
|
109
|
+
N as default
|
|
77
110
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
-
import { defineComponent as B, getCurrentInstance as L, useId as P, computed as l, watch as
|
|
3
|
-
import { useStore as
|
|
4
|
-
import { useOmegaErrors as
|
|
5
|
-
import
|
|
2
|
+
import { defineComponent as B, getCurrentInstance as L, useId as P, computed as l, watch as w, nextTick as S, onMounted as x, ref as T, watchEffect as z, renderSlot as A, normalizeProps as D, guardReactiveProps as F, createElementVNode as M, normalizeClass as N, createBlock as R, createCommentVNode as U, unref as j, openBlock as G, mergeProps as H } from "vue";
|
|
3
|
+
import { useStore as J } from "@tanstack/vue-form";
|
|
4
|
+
import { useOmegaErrors as K } from "./vue-components.es5.js";
|
|
5
|
+
import Q from "./vue-components.es24.js";
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const te = /* @__PURE__ */ B({
|
|
8
8
|
inheritAttrs: !1,
|
|
9
9
|
__name: "OmegaInternalInput",
|
|
10
10
|
props: {
|
|
@@ -15,66 +15,68 @@ const ee = /* @__PURE__ */ B({
|
|
|
15
15
|
type: {},
|
|
16
16
|
validators: {}
|
|
17
17
|
},
|
|
18
|
-
setup(
|
|
19
|
-
const e =
|
|
18
|
+
setup(C) {
|
|
19
|
+
const e = C, n = L(), $ = n == null ? void 0 : n.appContext.components.VTextField, o = P(), s = e.field, a = J(s.store, (t) => t), f = l(() => {
|
|
20
20
|
var t, r;
|
|
21
21
|
return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
|
|
22
|
-
}),
|
|
22
|
+
}), u = l(() => a.value.value), k = l(
|
|
23
23
|
() => (
|
|
24
24
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
25
|
a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
|
|
26
26
|
)
|
|
27
27
|
);
|
|
28
|
-
|
|
29
|
-
() =>
|
|
30
|
-
() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
(
|
|
34
|
-
|
|
28
|
+
w(
|
|
29
|
+
() => !!u.value,
|
|
30
|
+
(t) => {
|
|
31
|
+
t || S(() => {
|
|
32
|
+
var r;
|
|
33
|
+
s.setValue(
|
|
34
|
+
((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
|
|
35
|
+
);
|
|
36
|
+
});
|
|
35
37
|
}
|
|
36
|
-
),
|
|
38
|
+
), x(() => {
|
|
37
39
|
var t, r;
|
|
38
|
-
!
|
|
40
|
+
!u.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
|
|
39
41
|
});
|
|
40
|
-
const { addError: I, removeError: O, showErrors: _, showErrorsOn:
|
|
42
|
+
const { addError: I, removeError: O, showErrors: _, showErrorsOn: q } = K(), i = T(!1);
|
|
41
43
|
z(() => {
|
|
42
|
-
(_.value ||
|
|
44
|
+
(_.value || q === "onChange") && (i.value = !0);
|
|
43
45
|
});
|
|
44
46
|
const m = () => {
|
|
45
47
|
i.value = !0;
|
|
46
48
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
x(() => {
|
|
50
|
+
u.value && m();
|
|
49
51
|
});
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
+
const d = l(() => !i.value && f.value !== "select" ? [] : k.value);
|
|
53
|
+
w(
|
|
52
54
|
() => a.value.meta.errors,
|
|
53
55
|
() => {
|
|
54
56
|
a.value.meta.errors.length ? I({
|
|
55
|
-
inputId:
|
|
57
|
+
inputId: o,
|
|
56
58
|
errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
|
|
57
59
|
label: e.label
|
|
58
|
-
}) : O(
|
|
60
|
+
}) : O(o);
|
|
59
61
|
}
|
|
60
62
|
);
|
|
61
63
|
const p = l(() => {
|
|
62
|
-
var t, r, c, g, y, h, b, E, V
|
|
64
|
+
var t, r, c, v, g, y, h, b, E, V;
|
|
63
65
|
return {
|
|
64
|
-
id:
|
|
66
|
+
id: o,
|
|
65
67
|
required: (t = e.meta) == null ? void 0 : t.required,
|
|
66
68
|
minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
|
|
67
|
-
maxLength: ((
|
|
68
|
-
max: ((
|
|
69
|
-
min: ((
|
|
69
|
+
maxLength: ((v = e.meta) == null ? void 0 : v.type) === "string" && ((g = e.meta) == null ? void 0 : g.maxLength),
|
|
70
|
+
max: ((y = e.meta) == null ? void 0 : y.type) === "number" && ((h = e.meta) == null ? void 0 : h.maximum),
|
|
71
|
+
min: ((b = e.meta) == null ? void 0 : b.type) === "number" && ((E = e.meta) == null ? void 0 : E.minimum),
|
|
70
72
|
name: e.field.name,
|
|
71
73
|
modelValue: e.field.state.value,
|
|
72
|
-
errorMessages:
|
|
73
|
-
error: !!
|
|
74
|
+
errorMessages: d.value,
|
|
75
|
+
error: !!d.value.length,
|
|
74
76
|
field: e.field,
|
|
75
77
|
setRealDirty: m,
|
|
76
78
|
type: f.value,
|
|
77
|
-
label: `${e.label}${(
|
|
79
|
+
label: `${e.label}${(V = e.meta) != null && V.required ? " *" : ""}`,
|
|
78
80
|
options: e.options
|
|
79
81
|
};
|
|
80
82
|
});
|
|
@@ -83,16 +85,16 @@ const ee = /* @__PURE__ */ B({
|
|
|
83
85
|
class: N(t.$attrs.class),
|
|
84
86
|
onFocusout: m
|
|
85
87
|
}, [
|
|
86
|
-
|
|
88
|
+
j($) ? (G(), R(Q, H({
|
|
87
89
|
key: 0,
|
|
88
90
|
"input-props": p.value
|
|
89
91
|
}, t.$attrs, {
|
|
90
92
|
"vuetify-value": p.value.field.state.value
|
|
91
|
-
}), null, 16, ["input-props", "vuetify-value"])) :
|
|
93
|
+
}), null, 16, ["input-props", "vuetify-value"])) : U("", !0)
|
|
92
94
|
], 34)
|
|
93
95
|
]);
|
|
94
96
|
}
|
|
95
97
|
});
|
|
96
98
|
export {
|
|
97
|
-
|
|
99
|
+
te as default
|
|
98
100
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-4ef802c8]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,t){const o=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(o&&o.call(this),this.shadowRoot){const d=document.createElement("style");d.appendChild(document.createTextNode("fieldset[data-v-4ef802c8]{display:contents}")),this.shadowRoot.appendChild(d)}},e.call(window.customElements,c,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
2
|
import o from "./vue-components.es11.js";
|
|
3
3
|
|
|
4
4
|
import m from "./vue-components.es13.js";
|
|
5
|
-
const e = /* @__PURE__ */ m(o, [["__scopeId", "data-v-
|
|
5
|
+
const e = /* @__PURE__ */ m(o, [["__scopeId", "data-v-4ef802c8"]]);
|
|
6
6
|
export {
|
|
7
7
|
e as default
|
|
8
8
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode(".v-enter-from[data-v-31f11e27],.v-leave-to[data-v-31f11e27]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-31f11e27],.v-leave-active[data-v-31f11e27]{display:grid;transition:all .15s}.v-enter-to[data-v-31f11e27],.v-leave-from[data-v-31f11e27]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-31f11e27]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-31f11e27]{min-height:0}div.error-list[data-v-31f11e27]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:.5em;align-items:start}@container (max-width: 28.125rem){div.error-list[data-v-31f11e27]{grid-template-columns:auto 1fr}.error-link[data-v-31f11e27]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){div.error-list[data-v-31f11e27]{grid-template-columns:1fr}.error-message[data-v-31f11e27]{grid-column:1 / -1}}.error-item[data-v-31f11e27]{display:contents}a[data-v-31f11e27]{min-width:min-content}.error-link[data-v-31f11e27]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(n,t){const i=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(i&&i.call(this),this.shadowRoot){const r=document.createElement("style");r.appendChild(document.createTextNode(".v-enter-from[data-v-31f11e27],.v-leave-to[data-v-31f11e27]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-31f11e27],.v-leave-active[data-v-31f11e27]{display:grid;transition:all .15s}.v-enter-to[data-v-31f11e27],.v-leave-from[data-v-31f11e27]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-31f11e27]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-31f11e27]{min-height:0}div.error-list[data-v-31f11e27]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:.5em;align-items:start}@container (max-width: 28.125rem){div.error-list[data-v-31f11e27]{grid-template-columns:auto 1fr}.error-link[data-v-31f11e27]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){div.error-list[data-v-31f11e27]{grid-template-columns:1fr}.error-message[data-v-31f11e27]{grid-column:1 / -1}}.error-item[data-v-31f11e27]{display:contents}a[data-v-31f11e27]{min-width:min-content}.error-link[data-v-31f11e27]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),this.shadowRoot.appendChild(r)}},e.call(window.customElements,n,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
2
|
import o from "./vue-components.es15.js";
|
|
3
3
|
|
|
4
4
|
import r from "./vue-components.es13.js";
|
|
5
|
-
const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
5
|
+
const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-31f11e27"]]);
|
|
6
6
|
export {
|
|
7
7
|
e as default
|
|
8
8
|
};
|
package/package.json
CHANGED
|
@@ -130,7 +130,7 @@ const showedGeneralErrors = computed(() => {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.error-list {
|
|
133
|
+
div.error-list {
|
|
134
134
|
container-type: inline-size;
|
|
135
135
|
display: grid;
|
|
136
136
|
grid-template-columns: auto 1fr auto;
|
|
@@ -139,7 +139,7 @@ const showedGeneralErrors = computed(() => {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
@container (max-width: 28.125rem) {
|
|
142
|
-
.error-list {
|
|
142
|
+
div.error-list {
|
|
143
143
|
grid-template-columns: auto 1fr;
|
|
144
144
|
}
|
|
145
145
|
|
|
@@ -150,7 +150,7 @@ const showedGeneralErrors = computed(() => {
|
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
@container (max-width: 18.75rem) {
|
|
153
|
-
.error-list {
|
|
153
|
+
div.error-list {
|
|
154
154
|
grid-template-columns: 1fr;
|
|
155
155
|
}
|
|
156
156
|
|
|
@@ -22,6 +22,7 @@ import {
|
|
|
22
22
|
watchEffect,
|
|
23
23
|
type ComputedRef,
|
|
24
24
|
getCurrentInstance,
|
|
25
|
+
nextTick,
|
|
25
26
|
} from "vue"
|
|
26
27
|
import type {
|
|
27
28
|
FieldValidators,
|
|
@@ -73,12 +74,14 @@ const errors = computed(() =>
|
|
|
73
74
|
// we remove value and errors when the field is empty and not required
|
|
74
75
|
//watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
|
|
75
76
|
watch(
|
|
76
|
-
() =>
|
|
77
|
-
|
|
78
|
-
if (
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
() => !!fieldValue.value,
|
|
78
|
+
value => {
|
|
79
|
+
if (!value) {
|
|
80
|
+
nextTick(() => {
|
|
81
|
+
fieldApi.setValue(
|
|
82
|
+
props.meta?.nullableOrUndefined === "undefined" ? undefined : null,
|
|
83
|
+
)
|
|
84
|
+
})
|
|
82
85
|
}
|
|
83
86
|
},
|
|
84
87
|
)
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
import { useStore, type StandardSchemaV1Issue } from "@tanstack/vue-form"
|
|
62
62
|
import { type S } from "effect-app"
|
|
63
63
|
import {
|
|
64
|
-
type FilterItems,
|
|
65
64
|
type FormProps,
|
|
65
|
+
type FilterItems,
|
|
66
66
|
type OmegaFormApi,
|
|
67
67
|
type OmegaFormState,
|
|
68
68
|
type ShowErrorsOn,
|
|
@@ -74,23 +74,24 @@ import {
|
|
|
74
74
|
type OmegaFormReturn,
|
|
75
75
|
useOmegaForm,
|
|
76
76
|
} from "./useOmegaForm"
|
|
77
|
-
import { computed, watch, defineSlots } from "vue"
|
|
77
|
+
import { computed, watch, defineSlots, onBeforeMount } from "vue"
|
|
78
78
|
|
|
79
79
|
const props = defineProps<
|
|
80
80
|
{
|
|
81
81
|
omegaConfig?: OmegaConfig<From>
|
|
82
82
|
subscribe?: K[]
|
|
83
83
|
showErrorsOn?: ShowErrorsOn
|
|
84
|
-
} &
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
84
|
+
} & FormProps<To, From> &
|
|
85
|
+
(
|
|
86
|
+
| {
|
|
87
|
+
form: OmegaFormReturn<To, From>
|
|
88
|
+
schema?: undefined
|
|
89
|
+
}
|
|
90
|
+
| {
|
|
91
|
+
form?: undefined
|
|
92
|
+
schema: S.Schema<From, To, never>
|
|
93
|
+
}
|
|
94
|
+
)
|
|
94
95
|
>()
|
|
95
96
|
|
|
96
97
|
const localForm = computed(() => {
|
|
@@ -102,6 +103,52 @@ const localForm = computed(() => {
|
|
|
102
103
|
|
|
103
104
|
const formToUse = computed(() => props.form ?? localForm.value!)
|
|
104
105
|
|
|
106
|
+
onBeforeMount(() => {
|
|
107
|
+
if (!props.form) return
|
|
108
|
+
const formOptionsKeys = Object.keys(props.form.options || {})
|
|
109
|
+
|
|
110
|
+
const excludedKeys: Set<keyof typeof props> = new Set([
|
|
111
|
+
"omegaConfig",
|
|
112
|
+
"subscribe",
|
|
113
|
+
"showErrorsOn",
|
|
114
|
+
"asyncAlways",
|
|
115
|
+
"form",
|
|
116
|
+
"schema",
|
|
117
|
+
])
|
|
118
|
+
|
|
119
|
+
const filteredProps = Object.fromEntries(
|
|
120
|
+
Object.entries(props).filter(
|
|
121
|
+
([key, value]) =>
|
|
122
|
+
!excludedKeys.has(key as keyof typeof props) && value !== undefined,
|
|
123
|
+
),
|
|
124
|
+
) as Partial<typeof props>
|
|
125
|
+
|
|
126
|
+
const propsKeys = Object.keys(filteredProps)
|
|
127
|
+
|
|
128
|
+
const overlappingKeys = formOptionsKeys.filter(
|
|
129
|
+
key =>
|
|
130
|
+
propsKeys.includes(key) &&
|
|
131
|
+
filteredProps[key as keyof typeof props] !== undefined,
|
|
132
|
+
)
|
|
133
|
+
|
|
134
|
+
if (overlappingKeys.length > 0) {
|
|
135
|
+
console.warn(
|
|
136
|
+
`[OmegaWrapper] Overlapping keys found between form options and filtered props:\n${overlappingKeys.join(
|
|
137
|
+
", \n",
|
|
138
|
+
)}.\nProps will overwrite existing form options. This might indicate a configuration issue.`,
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const mergedOptions = {
|
|
143
|
+
...formToUse.value.options,
|
|
144
|
+
...filteredProps,
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
formToUse.value.options = Object.fromEntries(
|
|
148
|
+
Object.entries(mergedOptions).filter(([_, value]) => value !== undefined),
|
|
149
|
+
)
|
|
150
|
+
})
|
|
151
|
+
|
|
105
152
|
const formIsSubmitting = useStore(
|
|
106
153
|
formToUse.value.store,
|
|
107
154
|
state => state.isSubmitting,
|
|
@@ -57,7 +57,7 @@ export const OmegaFormKey = Symbol("OmegaForm") as InjectionKey<OF<any, any>>
|
|
|
57
57
|
|
|
58
58
|
export interface OmegaFormReturn<To extends Record<PropertyKey, any>, From>
|
|
59
59
|
extends OF<To, From> {
|
|
60
|
-
Input: typeof OmegaFormInput
|
|
60
|
+
Input: typeof OmegaFormInput
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
export const useOmegaForm = <
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<OmegaForm
|
|
3
|
+
:form="form"
|
|
4
|
+
:subscribe="['values']"
|
|
5
|
+
:on-submit="() => console.log('submitted1')"
|
|
6
|
+
>
|
|
7
|
+
<template #externalForm="{ subscribedValues: { values } }">
|
|
8
|
+
<div>values: {{ values }}</div>
|
|
9
|
+
<form.Input name="a" label="Nullable value" clearable />
|
|
10
|
+
<button type="submit">submit</button>
|
|
11
|
+
</template>
|
|
12
|
+
</OmegaForm>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<script setup lang="ts" generic="_, To">
|
|
16
|
+
import { S } from "effect-app"
|
|
17
|
+
import { OmegaForm, useOmegaForm } from "../../components/OmegaForm"
|
|
18
|
+
|
|
19
|
+
const form = useOmegaForm(S.Struct({ a: S.NullOr(S.String) }), {})
|
|
20
|
+
</script>
|
|
@@ -12,6 +12,7 @@ import PersistencyForm from "./OmegaForm/PersistencyForm.vue"
|
|
|
12
12
|
import MetaForm from "./OmegaForm/Meta.vue"
|
|
13
13
|
import FormInput from "./OmegaForm/form.Input.vue"
|
|
14
14
|
import OneHundredWaysToWriteAForm from "./OmegaForm/OneHundredWaysToWriteAForm.vue"
|
|
15
|
+
import Clearable from "./OmegaForm/Clearable.vue"
|
|
15
16
|
|
|
16
17
|
const mockIntl = {
|
|
17
18
|
locale: ref("en"),
|
|
@@ -104,3 +105,10 @@ export const FormInputStory: Story = {
|
|
|
104
105
|
template: "<FormInput />",
|
|
105
106
|
}),
|
|
106
107
|
}
|
|
108
|
+
|
|
109
|
+
export const ClearableStory: Story = {
|
|
110
|
+
render: () => ({
|
|
111
|
+
components: { Clearable },
|
|
112
|
+
template: "<Clearable />",
|
|
113
|
+
}),
|
|
114
|
+
}
|