@effect-app/vue-components 0.16.0 → 0.18.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 +7 -2
- package/dist/vue-components.es12.js +3 -3
- package/dist/vue-components.es20.js +42 -37
- package/dist/vue-components.es22.js +4 -3
- package/dist/vue-components.es23.js +42 -2
- package/dist/vue-components.es24.js +1 -1
- package/dist/vue-components.es25.js +10 -11
- package/dist/vue-components.es26.js +4 -2
- package/dist/vue-components.es27.js +11 -115
- package/dist/vue-components.es28.js +4 -0
- package/dist/vue-components.es29.js +6 -4
- package/dist/vue-components.es30.js +117 -0
- package/dist/vue-components.es32.js +6 -0
- package/package.json +3 -3
- package/src/components/OmegaForm/OmegaFormStuff.ts +12 -5
- package/src/components/OmegaForm/OmegaWrapper.vue +24 -13
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type Effect, S } from "effect-app";
|
|
2
2
|
import { type DeepKeys, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormApi, type FormAsyncValidateOrFn, type FormOptions, type FormState, type FormValidateOrFn, type StandardSchemaV1, type VueFormApi } from "@tanstack/vue-form";
|
|
3
|
+
import { type RuntimeFiber } from "effect/Fiber";
|
|
3
4
|
import { type OmegaFieldInternalApi } from "./InputProps";
|
|
4
5
|
import { type OmegaFormReturn } from "./useOmegaForm";
|
|
5
6
|
export type ShowErrorsOn = "onChange" | "onBlur" | "onSubmit";
|
|
@@ -23,11 +24,15 @@ export interface OmegaError {
|
|
|
23
24
|
errors: readonly string[];
|
|
24
25
|
}
|
|
25
26
|
export type FormProps<From, To> = Omit<FormOptions<From, FormValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, StandardSchemaV1<From, To>, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined>, "onSubmit"> & {
|
|
26
|
-
onSubmit?: (props: {
|
|
27
|
+
onSubmit?: ((props: {
|
|
27
28
|
formApi: OmegaFormParams<From, To>;
|
|
28
29
|
meta: any;
|
|
29
30
|
value: To;
|
|
30
|
-
}) => Promise<any> |
|
|
31
|
+
}) => Promise<any>) | (((props: {
|
|
32
|
+
formApi: OmegaFormParams<From, To>;
|
|
33
|
+
meta: any;
|
|
34
|
+
value: To;
|
|
35
|
+
}) => RuntimeFiber<any, any>));
|
|
31
36
|
};
|
|
32
37
|
export type OmegaFormParams<From, To> = FormApi<From, FormValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, StandardSchemaV1<From, To>, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined>;
|
|
33
38
|
export type OmegaFormState<From, To> = FormState<From, FormValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, StandardSchemaV1<From, To>, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined>;
|
|
@@ -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-c47eb4b1]{display:contents}fieldset[disabled][data-v-c47eb4b1]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-c47eb4b1]{display:contents}fieldset[disabled][data-v-c47eb4b1]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
2
|
import o from "./vue-components.es20.js";
|
|
3
3
|
|
|
4
4
|
import r from "./vue-components.es17.js";
|
|
5
|
-
const
|
|
5
|
+
const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c47eb4b1"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
e as default
|
|
8
8
|
};
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as j, getCurrentInstance as M, computed as c, watch as b, onBeforeMount as B, createElementBlock as v, openBlock as g, withModifiers as C, createElementVNode as I, unref as m, renderSlot as d, createCommentVNode as L, Fragment as V } from "vue";
|
|
2
2
|
import { useStore as O } from "@tanstack/vue-form";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
3
|
+
import { runtimeFiberAsPromise as k } from "./vue-components.es25.js";
|
|
4
|
+
import { isFiber as A, isRuntimeFiber as $ } from "./vue-components.es26.js";
|
|
5
|
+
import { getOmegaStore as K } from "./vue-components.es27.js";
|
|
6
|
+
import { provideOmegaErrors as P } from "./vue-components.es8.js";
|
|
7
|
+
import { useOmegaForm as _ } from "./vue-components.es9.js";
|
|
8
|
+
const x = ["disabled"], z = /* @__PURE__ */ j({
|
|
7
9
|
__name: "OmegaWrapper",
|
|
8
10
|
props: {
|
|
9
11
|
omegaConfig: {},
|
|
@@ -23,24 +25,27 @@ const K = ["disabled"], W = /* @__PURE__ */ M({
|
|
|
23
25
|
onSubmit: {}
|
|
24
26
|
},
|
|
25
27
|
setup(S) {
|
|
26
|
-
const o = S, h =
|
|
27
|
-
new Promise((
|
|
28
|
+
const o = S, h = M(), y = c(
|
|
29
|
+
() => ({ value: e }) => new Promise((t) => {
|
|
28
30
|
h.emit("submit", e);
|
|
29
|
-
const n = b(() => o.isLoading, (
|
|
30
|
-
|
|
31
|
+
const n = b(() => o.isLoading, (r) => {
|
|
32
|
+
r || (t(), n.stop());
|
|
31
33
|
});
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
+
})
|
|
35
|
+
), u = o.form || !o.schema ? void 0 : _(
|
|
34
36
|
o.schema,
|
|
35
37
|
{
|
|
36
38
|
...o,
|
|
37
|
-
onSubmit: typeof o.isLoading < "u" ? y : o.onSubmit
|
|
39
|
+
onSubmit: typeof o.isLoading < "u" ? y.value : typeof o.onSubmit < "u" ? (e) => {
|
|
40
|
+
const t = o.onSubmit(e);
|
|
41
|
+
return A(t) && $(t) ? k(t) : t;
|
|
42
|
+
} : o.onSubmit
|
|
38
43
|
},
|
|
39
44
|
o.omegaConfig
|
|
40
|
-
), s =
|
|
45
|
+
), s = c(() => o.form ?? u);
|
|
41
46
|
B(() => {
|
|
42
47
|
if (!o.form) return;
|
|
43
|
-
const e = Object.keys(o.form.options || {}),
|
|
48
|
+
const e = Object.keys(o.form.options || {}), t = /* @__PURE__ */ new Set([
|
|
44
49
|
"omegaConfig",
|
|
45
50
|
"subscribe",
|
|
46
51
|
"showErrorsOn",
|
|
@@ -49,10 +54,10 @@ const K = ["disabled"], W = /* @__PURE__ */ M({
|
|
|
49
54
|
"schema"
|
|
50
55
|
]), n = Object.fromEntries(
|
|
51
56
|
Object.entries(o).filter(
|
|
52
|
-
([a, f]) => a === "isLoading" ? !1 : !
|
|
57
|
+
([a, f]) => a === "isLoading" ? !1 : !t.has(a) && f !== void 0
|
|
53
58
|
)
|
|
54
|
-
),
|
|
55
|
-
(a) =>
|
|
59
|
+
), r = Object.keys(n), i = e.filter(
|
|
60
|
+
(a) => r.includes(a) && n[a] !== void 0
|
|
56
61
|
);
|
|
57
62
|
i.length > 0 && console.warn(
|
|
58
63
|
`[OmegaWrapper] Overlapping keys found between form options and filtered props:
|
|
@@ -62,13 +67,13 @@ ${i.join(
|
|
|
62
67
|
)}.
|
|
63
68
|
Props will overwrite existing form options. This might indicate a configuration issue.`
|
|
64
69
|
);
|
|
65
|
-
const
|
|
70
|
+
const F = {
|
|
66
71
|
...s.value.options,
|
|
67
72
|
...n
|
|
68
73
|
};
|
|
69
74
|
s.value.options = Object.fromEntries(
|
|
70
75
|
// TODO
|
|
71
|
-
Object.entries(
|
|
76
|
+
Object.entries(F).filter(
|
|
72
77
|
([a, f]) => f !== void 0
|
|
73
78
|
)
|
|
74
79
|
);
|
|
@@ -76,50 +81,50 @@ Props will overwrite existing form options. This might indicate a configuration
|
|
|
76
81
|
const w = O(
|
|
77
82
|
s.value.store,
|
|
78
83
|
(e) => e.isSubmitting
|
|
79
|
-
),
|
|
84
|
+
), p = K(
|
|
80
85
|
s.value,
|
|
81
86
|
o.subscribe
|
|
82
87
|
), E = O(
|
|
83
88
|
s.value.store,
|
|
84
89
|
(e) => e.submissionAttempts
|
|
85
|
-
), l =
|
|
90
|
+
), l = c(() => s.value.useStore((e) => e.errors));
|
|
86
91
|
return b(
|
|
87
92
|
() => [s.value.filterItems, l.value.value],
|
|
88
93
|
() => {
|
|
89
|
-
const e = s.value.filterItems,
|
|
90
|
-
return e ?
|
|
91
|
-
(
|
|
94
|
+
const e = s.value.filterItems, t = l.value.value;
|
|
95
|
+
return e ? t ? (Object.values(t).filter(
|
|
96
|
+
(r) => !!r
|
|
92
97
|
).flatMap(
|
|
93
|
-
(
|
|
94
|
-
).some((
|
|
95
|
-
const i = s.value.getFieldMeta(
|
|
96
|
-
i && s.value.setFieldMeta(
|
|
98
|
+
(r) => Object.values(r).flat().map((i) => i.message)
|
|
99
|
+
).some((r) => r === e.message) && e.items.forEach((r) => {
|
|
100
|
+
const i = s.value.getFieldMeta(r);
|
|
101
|
+
i && s.value.setFieldMeta(r, {
|
|
97
102
|
...i,
|
|
98
103
|
errorMap: {
|
|
99
104
|
onSubmit: [
|
|
100
|
-
{ path: [
|
|
105
|
+
{ path: [r], message: e.message }
|
|
101
106
|
]
|
|
102
107
|
}
|
|
103
108
|
});
|
|
104
109
|
}), {}) : {} : {};
|
|
105
110
|
}
|
|
106
|
-
),
|
|
111
|
+
), P(E, l.value, o.showErrorsOn), (e, t) => (g(), v("form", {
|
|
107
112
|
novalidate: "",
|
|
108
|
-
onSubmit:
|
|
113
|
+
onSubmit: t[0] || (t[0] = C((n) => s.value.handleSubmit(), ["prevent", "stop"]))
|
|
109
114
|
}, [
|
|
110
115
|
I("fieldset", { disabled: m(w) }, [
|
|
111
116
|
o.form ? (g(), v(V, { key: 0 }, [
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
], 64)) : m(u) ?
|
|
117
|
+
d(e.$slots, "externalForm", { subscribedValues: m(p) }, void 0, !0),
|
|
118
|
+
d(e.$slots, "default", {}, void 0, !0)
|
|
119
|
+
], 64)) : m(u) ? d(e.$slots, "internalForm", {
|
|
115
120
|
key: 1,
|
|
116
121
|
form: m(u),
|
|
117
|
-
subscribedValues: m(
|
|
122
|
+
subscribedValues: m(p)
|
|
118
123
|
}, void 0, !0) : L("", !0)
|
|
119
|
-
], 8,
|
|
124
|
+
], 8, x)
|
|
120
125
|
], 32));
|
|
121
126
|
}
|
|
122
127
|
});
|
|
123
128
|
export {
|
|
124
|
-
|
|
129
|
+
z as default
|
|
125
130
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const s =
|
|
1
|
+
import { dual as c, isFunction as n } from "./vue-components.es23.js";
|
|
2
|
+
const s = n, r = (o) => typeof o == "object" && o !== null, i = (o) => r(o) || s(o), a = /* @__PURE__ */ c(2, (o, t) => i(o) && t in o);
|
|
3
3
|
export {
|
|
4
|
+
a as hasProperty,
|
|
4
5
|
s as isFunction,
|
|
5
6
|
i as isObject,
|
|
6
|
-
|
|
7
|
+
r as isRecordOrArray
|
|
7
8
|
};
|
|
@@ -1,4 +1,44 @@
|
|
|
1
|
-
const
|
|
1
|
+
const f = (c) => typeof c == "function", a = function(c, r) {
|
|
2
|
+
switch (c) {
|
|
3
|
+
case 0:
|
|
4
|
+
case 1:
|
|
5
|
+
throw new RangeError(`Invalid arity ${c}`);
|
|
6
|
+
case 2:
|
|
7
|
+
return function(n, t) {
|
|
8
|
+
return arguments.length >= 2 ? r(n, t) : function(e) {
|
|
9
|
+
return r(e, n);
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
case 3:
|
|
13
|
+
return function(n, t, e) {
|
|
14
|
+
return arguments.length >= 3 ? r(n, t, e) : function(u) {
|
|
15
|
+
return r(u, n, t);
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
case 4:
|
|
19
|
+
return function(n, t, e, u) {
|
|
20
|
+
return arguments.length >= 4 ? r(n, t, e, u) : function(i) {
|
|
21
|
+
return r(i, n, t, e);
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
case 5:
|
|
25
|
+
return function(n, t, e, u, i) {
|
|
26
|
+
return arguments.length >= 5 ? r(n, t, e, u, i) : function(s) {
|
|
27
|
+
return r(s, n, t, e, u);
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
default:
|
|
31
|
+
return function() {
|
|
32
|
+
if (arguments.length >= c)
|
|
33
|
+
return r.apply(this, arguments);
|
|
34
|
+
const n = arguments;
|
|
35
|
+
return function(t) {
|
|
36
|
+
return r(t, ...n);
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
};
|
|
2
41
|
export {
|
|
3
|
-
|
|
42
|
+
a as dual,
|
|
43
|
+
f as isFunction
|
|
4
44
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
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
3
|
import { useStore as z } from "@tanstack/vue-form";
|
|
4
4
|
import { useOmegaErrors as A } from "./vue-components.es8.js";
|
|
5
|
-
import D from "./vue-components.
|
|
5
|
+
import D from "./vue-components.es30.js";
|
|
6
6
|
|
|
7
7
|
const J = /* @__PURE__ */ w({
|
|
8
8
|
inheritAttrs: !1,
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return r;
|
|
9
|
-
}).value : {});
|
|
10
|
-
}
|
|
1
|
+
import { Exit as i, Cause as c } from "effect";
|
|
2
|
+
import { dual as s, isFunction as u } from "./vue-components.es23.js";
|
|
3
|
+
const n = Symbol.for("clone-trait"), a = s(2, (e, o) => n in e ? e[n](o) : Object.setPrototypeOf(o, Object.getPrototypeOf(e)));
|
|
4
|
+
s(2, (e, o) => a(e, { ...e, ...u(o) ? o(e) : o }));
|
|
5
|
+
const b = (e) => new Promise((o, r) => e.addObserver((t) => {
|
|
6
|
+
i.isSuccess(t) ? o(t.value) : r(c.squash(t.cause));
|
|
7
|
+
}));
|
|
11
8
|
export {
|
|
12
|
-
|
|
9
|
+
a as clone,
|
|
10
|
+
n as cloneTrait,
|
|
11
|
+
b as runtimeFiberAsPromise
|
|
13
12
|
};
|
|
@@ -1,117 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
return (e, r) => {
|
|
12
|
-
const a = s("v-text-field"), t = s("v-textarea"), m = s("v-select"), d = s("v-autocomplete");
|
|
13
|
-
return o(), g("div", {
|
|
14
|
-
class: "omega-input",
|
|
15
|
-
onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
|
|
16
|
-
onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
|
|
17
|
-
}, [
|
|
18
|
-
e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (o(), n(u(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), i({
|
|
19
|
-
key: 0,
|
|
20
|
-
id: e.inputProps.id,
|
|
21
|
-
name: e.inputProps.name,
|
|
22
|
-
label: e.inputProps.label,
|
|
23
|
-
"error-messages": e.inputProps.errorMessages,
|
|
24
|
-
error: e.inputProps.error,
|
|
25
|
-
ripple: ""
|
|
26
|
-
}, e.$attrs, {
|
|
27
|
-
"model-value": e.vuetifyValue,
|
|
28
|
-
onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
|
|
29
|
-
}), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
|
|
30
|
-
e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(a, i({
|
|
31
|
-
key: 1,
|
|
32
|
-
id: e.inputProps.id,
|
|
33
|
-
required: e.inputProps.required,
|
|
34
|
-
"min-length": e.inputProps.minLength,
|
|
35
|
-
"max-length": e.inputProps.maxLength,
|
|
36
|
-
type: e.inputProps.type,
|
|
37
|
-
name: e.inputProps.name,
|
|
38
|
-
label: e.inputProps.label,
|
|
39
|
-
"error-messages": e.inputProps.errorMessages,
|
|
40
|
-
error: e.inputProps.error
|
|
41
|
-
}, e.$attrs, {
|
|
42
|
-
"model-value": e.vuetifyValue,
|
|
43
|
-
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
44
|
-
}), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
45
|
-
e.inputProps.type === "text" ? (o(), n(t, i({
|
|
46
|
-
key: 2,
|
|
47
|
-
id: e.inputProps.id,
|
|
48
|
-
required: e.inputProps.required,
|
|
49
|
-
"min-length": e.inputProps.minLength,
|
|
50
|
-
"max-length": e.inputProps.maxLength,
|
|
51
|
-
type: e.inputProps.type,
|
|
52
|
-
name: e.inputProps.name,
|
|
53
|
-
label: e.inputProps.label,
|
|
54
|
-
"error-messages": e.inputProps.errorMessages,
|
|
55
|
-
error: e.inputProps.error
|
|
56
|
-
}, e.$attrs, {
|
|
57
|
-
"model-value": e.vuetifyValue,
|
|
58
|
-
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
59
|
-
}), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
60
|
-
e.inputProps.type === "number" || e.inputProps.type === "range" ? (o(), n(u(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), i({
|
|
61
|
-
key: 3,
|
|
62
|
-
id: e.inputProps.id,
|
|
63
|
-
required: e.inputProps.required,
|
|
64
|
-
min: e.inputProps.min,
|
|
65
|
-
max: e.inputProps.max,
|
|
66
|
-
type: e.inputProps.type,
|
|
67
|
-
name: e.inputProps.name,
|
|
68
|
-
label: e.inputProps.label,
|
|
69
|
-
"error-messages": e.inputProps.errorMessages,
|
|
70
|
-
error: e.inputProps.error
|
|
71
|
-
}, e.$attrs, {
|
|
72
|
-
"model-value": e.vuetifyValue,
|
|
73
|
-
"onUpdate:modelValue": r[1] || (r[1] = (p) => {
|
|
74
|
-
p || p === 0 ? e.inputProps.field.handleChange(Number(p)) : e.inputProps.field.handleChange(void 0);
|
|
75
|
-
})
|
|
76
|
-
}), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
|
|
77
|
-
e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, i({
|
|
78
|
-
key: 4,
|
|
79
|
-
id: e.inputProps.id,
|
|
80
|
-
clearable: e.inputProps.type === "select",
|
|
81
|
-
required: e.inputProps.required,
|
|
82
|
-
multiple: e.inputProps.type === "multiple",
|
|
83
|
-
chips: e.inputProps.type === "multiple",
|
|
84
|
-
name: e.inputProps.name,
|
|
85
|
-
label: e.inputProps.label,
|
|
86
|
-
items: e.inputProps.options,
|
|
87
|
-
"error-messages": e.inputProps.errorMessages,
|
|
88
|
-
error: e.inputProps.error
|
|
89
|
-
}, e.$attrs, {
|
|
90
|
-
"model-value": e.vuetifyValue,
|
|
91
|
-
onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
|
|
92
|
-
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
93
|
-
}), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
94
|
-
e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, i({
|
|
95
|
-
key: 5,
|
|
96
|
-
id: e.inputProps.id,
|
|
97
|
-
clearable: e.inputProps.type === "autocomplete",
|
|
98
|
-
multiple: e.inputProps.type === "autocompletemultiple",
|
|
99
|
-
required: e.inputProps.required,
|
|
100
|
-
name: e.inputProps.name,
|
|
101
|
-
label: e.inputProps.label,
|
|
102
|
-
items: e.inputProps.options,
|
|
103
|
-
"error-messages": e.inputProps.errorMessages,
|
|
104
|
-
error: e.inputProps.error,
|
|
105
|
-
chips: e.inputProps.type === "autocompletemultiple"
|
|
106
|
-
}, e.$attrs, {
|
|
107
|
-
"model-value": e.vuetifyValue,
|
|
108
|
-
onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
|
|
109
|
-
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
110
|
-
}), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
|
|
111
|
-
], 32);
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
});
|
|
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
|
+
}
|
|
115
11
|
export {
|
|
116
|
-
|
|
12
|
+
c as getOmegaStore
|
|
117
13
|
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { hasProperty as o } from "./vue-components.es22.js";
|
|
2
|
+
const i = "effect/Fiber", r = /* @__PURE__ */ Symbol.for(i), t = "effect/Fiber", b = /* @__PURE__ */ Symbol.for(t), m = (e) => o(e, r), s = (e) => b in e;
|
|
4
3
|
export {
|
|
5
|
-
|
|
4
|
+
r as FiberTypeId,
|
|
5
|
+
b as RuntimeFiberTypeId,
|
|
6
|
+
m as isFiber,
|
|
7
|
+
s as isRuntimeFiber
|
|
6
8
|
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { defineComponent as P, resolveComponent as s, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, resolveDynamicComponent as u, mergeProps as i } from "vue";
|
|
2
|
+
const b = /* @__PURE__ */ P({
|
|
3
|
+
inheritAttrs: !1,
|
|
4
|
+
__name: "OmegaInputVuetify",
|
|
5
|
+
props: {
|
|
6
|
+
inputProps: {},
|
|
7
|
+
vuetifyValue: {}
|
|
8
|
+
},
|
|
9
|
+
emits: ["focus", "blur"],
|
|
10
|
+
setup(y) {
|
|
11
|
+
return (e, r) => {
|
|
12
|
+
const a = s("v-text-field"), t = s("v-textarea"), m = s("v-select"), d = s("v-autocomplete");
|
|
13
|
+
return o(), g("div", {
|
|
14
|
+
class: "omega-input",
|
|
15
|
+
onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
|
|
16
|
+
onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
|
|
17
|
+
}, [
|
|
18
|
+
e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (o(), n(u(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), i({
|
|
19
|
+
key: 0,
|
|
20
|
+
id: e.inputProps.id,
|
|
21
|
+
name: e.inputProps.name,
|
|
22
|
+
label: e.inputProps.label,
|
|
23
|
+
"error-messages": e.inputProps.errorMessages,
|
|
24
|
+
error: e.inputProps.error,
|
|
25
|
+
ripple: ""
|
|
26
|
+
}, e.$attrs, {
|
|
27
|
+
"model-value": e.vuetifyValue,
|
|
28
|
+
onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
|
|
29
|
+
}), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
|
|
30
|
+
e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(a, i({
|
|
31
|
+
key: 1,
|
|
32
|
+
id: e.inputProps.id,
|
|
33
|
+
required: e.inputProps.required,
|
|
34
|
+
"min-length": e.inputProps.minLength,
|
|
35
|
+
"max-length": e.inputProps.maxLength,
|
|
36
|
+
type: e.inputProps.type,
|
|
37
|
+
name: e.inputProps.name,
|
|
38
|
+
label: e.inputProps.label,
|
|
39
|
+
"error-messages": e.inputProps.errorMessages,
|
|
40
|
+
error: e.inputProps.error
|
|
41
|
+
}, e.$attrs, {
|
|
42
|
+
"model-value": e.vuetifyValue,
|
|
43
|
+
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
44
|
+
}), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
45
|
+
e.inputProps.type === "text" ? (o(), n(t, i({
|
|
46
|
+
key: 2,
|
|
47
|
+
id: e.inputProps.id,
|
|
48
|
+
required: e.inputProps.required,
|
|
49
|
+
"min-length": e.inputProps.minLength,
|
|
50
|
+
"max-length": e.inputProps.maxLength,
|
|
51
|
+
type: e.inputProps.type,
|
|
52
|
+
name: e.inputProps.name,
|
|
53
|
+
label: e.inputProps.label,
|
|
54
|
+
"error-messages": e.inputProps.errorMessages,
|
|
55
|
+
error: e.inputProps.error
|
|
56
|
+
}, e.$attrs, {
|
|
57
|
+
"model-value": e.vuetifyValue,
|
|
58
|
+
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
59
|
+
}), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
60
|
+
e.inputProps.type === "number" || e.inputProps.type === "range" ? (o(), n(u(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), i({
|
|
61
|
+
key: 3,
|
|
62
|
+
id: e.inputProps.id,
|
|
63
|
+
required: e.inputProps.required,
|
|
64
|
+
min: e.inputProps.min,
|
|
65
|
+
max: e.inputProps.max,
|
|
66
|
+
type: e.inputProps.type,
|
|
67
|
+
name: e.inputProps.name,
|
|
68
|
+
label: e.inputProps.label,
|
|
69
|
+
"error-messages": e.inputProps.errorMessages,
|
|
70
|
+
error: e.inputProps.error
|
|
71
|
+
}, e.$attrs, {
|
|
72
|
+
"model-value": e.vuetifyValue,
|
|
73
|
+
"onUpdate:modelValue": r[1] || (r[1] = (p) => {
|
|
74
|
+
p || p === 0 ? e.inputProps.field.handleChange(Number(p)) : e.inputProps.field.handleChange(void 0);
|
|
75
|
+
})
|
|
76
|
+
}), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
|
|
77
|
+
e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, i({
|
|
78
|
+
key: 4,
|
|
79
|
+
id: e.inputProps.id,
|
|
80
|
+
clearable: e.inputProps.type === "select",
|
|
81
|
+
required: e.inputProps.required,
|
|
82
|
+
multiple: e.inputProps.type === "multiple",
|
|
83
|
+
chips: e.inputProps.type === "multiple",
|
|
84
|
+
name: e.inputProps.name,
|
|
85
|
+
label: e.inputProps.label,
|
|
86
|
+
items: e.inputProps.options,
|
|
87
|
+
"error-messages": e.inputProps.errorMessages,
|
|
88
|
+
error: e.inputProps.error
|
|
89
|
+
}, e.$attrs, {
|
|
90
|
+
"model-value": e.vuetifyValue,
|
|
91
|
+
onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
|
|
92
|
+
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
93
|
+
}), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
|
|
94
|
+
e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, i({
|
|
95
|
+
key: 5,
|
|
96
|
+
id: e.inputProps.id,
|
|
97
|
+
clearable: e.inputProps.type === "autocomplete",
|
|
98
|
+
multiple: e.inputProps.type === "autocompletemultiple",
|
|
99
|
+
required: e.inputProps.required,
|
|
100
|
+
name: e.inputProps.name,
|
|
101
|
+
label: e.inputProps.label,
|
|
102
|
+
items: e.inputProps.options,
|
|
103
|
+
"error-messages": e.inputProps.errorMessages,
|
|
104
|
+
error: e.inputProps.error,
|
|
105
|
+
chips: e.inputProps.type === "autocompletemultiple"
|
|
106
|
+
}, e.$attrs, {
|
|
107
|
+
"model-value": e.vuetifyValue,
|
|
108
|
+
onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
|
|
109
|
+
"onUpdate:modelValue": e.inputProps.field.handleChange
|
|
110
|
+
}), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
|
|
111
|
+
], 32);
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
export {
|
|
116
|
+
b as default
|
|
117
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
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 o from "./vue-components.es30.js";
|
|
3
|
+
|
|
4
|
+
export {
|
|
5
|
+
o as default
|
|
6
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@effect-app/vue-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@mdi/js": "^7.4.47",
|
|
6
6
|
"@tanstack/vue-form": "1.2.4",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"highlight.js": "^11.11.1",
|
|
55
55
|
"vue3-highlightjs": "^1.0.5",
|
|
56
|
-
"@effect-app/vue": "2.54.
|
|
57
|
-
"effect-app": "3.
|
|
56
|
+
"@effect-app/vue": "2.54.5",
|
|
57
|
+
"effect-app": "3.3.0"
|
|
58
58
|
},
|
|
59
59
|
"scripts": {
|
|
60
60
|
"build": "pnpm build:run",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type Effect, Option, pipe, type Record, S } from "effect-app"
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
3
|
import { type DeepKeys, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormApi, type FormAsyncValidateOrFn, type FormOptions, type FormState, type FormValidateOrFn, type StandardSchemaV1, type VueFormApi } from "@tanstack/vue-form"
|
|
4
|
+
import { type RuntimeFiber } from "effect/Fiber"
|
|
4
5
|
import { useIntl } from "../../utils"
|
|
5
6
|
import { type OmegaFieldInternalApi } from "./InputProps"
|
|
6
7
|
import { type OmegaFormReturn } from "./useOmegaForm"
|
|
@@ -55,11 +56,17 @@ export type FormProps<From, To> =
|
|
|
55
56
|
"onSubmit"
|
|
56
57
|
>
|
|
57
58
|
& {
|
|
58
|
-
onSubmit?:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
onSubmit?:
|
|
60
|
+
| ((props: {
|
|
61
|
+
formApi: OmegaFormParams<From, To>
|
|
62
|
+
meta: any
|
|
63
|
+
value: To
|
|
64
|
+
}) => Promise<any>)
|
|
65
|
+
| (((props: {
|
|
66
|
+
formApi: OmegaFormParams<From, To>
|
|
67
|
+
meta: any
|
|
68
|
+
value: To
|
|
69
|
+
}) => RuntimeFiber<any, any>))
|
|
63
70
|
}
|
|
64
71
|
|
|
65
72
|
export type OmegaFormParams<From, To> = FormApi<
|
|
@@ -67,7 +67,9 @@
|
|
|
67
67
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
68
68
|
import { type StandardSchemaV1Issue, useStore } from "@tanstack/vue-form"
|
|
69
69
|
import { type Record, type S } from "effect-app"
|
|
70
|
-
import {
|
|
70
|
+
import { runtimeFiberAsPromise } from "effect-app/utils"
|
|
71
|
+
import { isFiber, isRuntimeFiber } from "effect/Fiber"
|
|
72
|
+
import { computed, type ComputedRef, getCurrentInstance, onBeforeMount, watch } from "vue"
|
|
71
73
|
import { getOmegaStore } from "./getOmegaStore"
|
|
72
74
|
import { provideOmegaErrors } from "./OmegaErrorsContext"
|
|
73
75
|
import { type FilterItems, type FormProps, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff"
|
|
@@ -110,18 +112,19 @@ const instance = getCurrentInstance()
|
|
|
110
112
|
// we prefer to use the standard abstraction in Vue which separates props (going down) and event emits (going back up)
|
|
111
113
|
// so if isLoading + @submit are provided, we wrap them into a Promise, so that TanStack Form can properly track the submitting state.
|
|
112
114
|
// we use this approach because it means we can keep relying on the built-in beaviour of TanStack Form, and we dont have to re-implement/keep in sync/break any internals.
|
|
113
|
-
const eventOnSubmit: FormProps<From, To>["onSubmit"] = (
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
115
|
+
const eventOnSubmit: ComputedRef<FormProps<From, To>["onSubmit"]> = computed(
|
|
116
|
+
() => ({ value }) =>
|
|
117
|
+
new Promise<void>((resolve) => {
|
|
118
|
+
instance!.emit("submit", value)
|
|
119
|
+
// even if the emit would be immediately handled, prop changes are not published/received immediately.
|
|
120
|
+
// so we have to wait for the prop to change to true, and back to false again.
|
|
121
|
+
const handle = watch(() => props.isLoading, (v) => {
|
|
122
|
+
if (v) return
|
|
123
|
+
resolve()
|
|
124
|
+
handle.stop()
|
|
125
|
+
})
|
|
122
126
|
})
|
|
123
|
-
|
|
124
|
-
}
|
|
127
|
+
)
|
|
125
128
|
|
|
126
129
|
const localForm = props.form || !props.schema
|
|
127
130
|
? undefined
|
|
@@ -130,7 +133,15 @@ const localForm = props.form || !props.schema
|
|
|
130
133
|
{
|
|
131
134
|
...props,
|
|
132
135
|
onSubmit: typeof props.isLoading !== "undefined"
|
|
133
|
-
? eventOnSubmit
|
|
136
|
+
? eventOnSubmit.value
|
|
137
|
+
: typeof props.onSubmit !== "undefined"
|
|
138
|
+
? (data) => {
|
|
139
|
+
const result = props.onSubmit!(data)
|
|
140
|
+
if (isFiber(result) && isRuntimeFiber(result)) {
|
|
141
|
+
return runtimeFiberAsPromise(result)
|
|
142
|
+
}
|
|
143
|
+
return result
|
|
144
|
+
}
|
|
134
145
|
: props.onSubmit
|
|
135
146
|
},
|
|
136
147
|
props.omegaConfig
|