@effect-app/vue-components 0.17.0 → 0.18.1

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.
@@ -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> | 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-34631bd6]{display:contents}fieldset[disabled][data-v-34631bd6]>*{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-34631bd6]{display:contents}fieldset[disabled][data-v-34631bd6]>*{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
- import o from "./vue-components.es20.js";
1
+ (function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-91ad6aaf]{display:contents}fieldset[disabled][data-v-91ad6aaf]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode("fieldset[data-v-91ad6aaf]{display:contents}fieldset[disabled][data-v-91ad6aaf]>*{pointer-events:none}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
+ import a from "./vue-components.es20.js";
3
3
 
4
- import r from "./vue-components.es17.js";
5
- const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-34631bd6"]]);
4
+ import o from "./vue-components.es17.js";
5
+ const m = /* @__PURE__ */ o(a, [["__scopeId", "data-v-91ad6aaf"]]);
6
6
  export {
7
7
  m as default
8
8
  };
@@ -1,6 +1,6 @@
1
- import { defineComponent as M, getCurrentInstance as F, 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";
1
+ import { defineComponent as M, getCurrentInstance as F, computed as p, onBeforeMount as B, watch as b, createElementBlock as v, openBlock as g, withModifiers as C, createElementVNode as I, unref as m, renderSlot as c, createCommentVNode as L, Fragment as V } from "vue";
2
2
  import { useStore as O } from "@tanstack/vue-form";
3
- import { getOmegaStore as k } from "./vue-components.es24.js";
3
+ import { getOmegaStore as k } from "./vue-components.es26.js";
4
4
  import { provideOmegaErrors as $ } from "./vue-components.es8.js";
5
5
  import { useOmegaForm as A } from "./vue-components.es9.js";
6
6
  const K = ["disabled"], W = /* @__PURE__ */ M({
@@ -23,23 +23,19 @@ const K = ["disabled"], W = /* @__PURE__ */ M({
23
23
  onSubmit: {}
24
24
  },
25
25
  setup(S) {
26
- const o = S, h = F(), y = c(
27
- () => ({ value: e }) => {
28
- new Promise((r) => {
29
- h.emit("submit", e);
30
- const n = b(() => o.isLoading, (t) => {
31
- t || (r(), n.stop());
32
- });
33
- });
34
- }
35
- ), u = o.form || !o.schema ? void 0 : A(
26
+ const o = S, h = F(), y = ({ value: e }) => new Promise((r) => {
27
+ h.emit("submit", e);
28
+ const n = b(() => o.isLoading, (t) => {
29
+ t || (r(), n.stop());
30
+ });
31
+ }), u = o.form || !o.schema ? void 0 : A(
36
32
  o.schema,
37
33
  {
38
34
  ...o,
39
- onSubmit: typeof o.isLoading < "u" ? y.value : o.onSubmit
35
+ onSubmit: typeof o.isLoading < "u" ? y : o.onSubmit
40
36
  },
41
37
  o.omegaConfig
42
- ), s = c(() => o.form ?? u);
38
+ ), s = p(() => o.form ?? u);
43
39
  B(() => {
44
40
  if (!o.form) return;
45
41
  const e = Object.keys(o.form.options || {}), r = /* @__PURE__ */ new Set([
@@ -78,13 +74,13 @@ Props will overwrite existing form options. This might indicate a configuration
78
74
  const w = O(
79
75
  s.value.store,
80
76
  (e) => e.isSubmitting
81
- ), p = k(
77
+ ), d = k(
82
78
  s.value,
83
79
  o.subscribe
84
80
  ), E = O(
85
81
  s.value.store,
86
82
  (e) => e.submissionAttempts
87
- ), l = c(() => s.value.useStore((e) => e.errors));
83
+ ), l = p(() => s.value.useStore((e) => e.errors));
88
84
  return b(
89
85
  () => [s.value.filterItems, l.value.value],
90
86
  () => {
@@ -111,12 +107,12 @@ Props will overwrite existing form options. This might indicate a configuration
111
107
  }, [
112
108
  I("fieldset", { disabled: m(w) }, [
113
109
  o.form ? (g(), v(V, { key: 0 }, [
114
- d(e.$slots, "externalForm", { subscribedValues: m(p) }, void 0, !0),
115
- d(e.$slots, "default", {}, void 0, !0)
116
- ], 64)) : m(u) ? d(e.$slots, "internalForm", {
110
+ c(e.$slots, "externalForm", { subscribedValues: m(d) }, void 0, !0),
111
+ c(e.$slots, "default", {}, void 0, !0)
112
+ ], 64)) : m(u) ? c(e.$slots, "internalForm", {
117
113
  key: 1,
118
114
  form: m(u),
119
- subscribedValues: m(p)
115
+ subscribedValues: m(d)
120
116
  }, void 0, !0) : L("", !0)
121
117
  ], 8, K)
122
118
  ], 32));
@@ -1,7 +1,12 @@
1
- import { isFunction as c } from "./vue-components.es23.js";
2
- const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
1
+ import { Exit as i, Cause as c } from "effect";
2
+ import { dual as s, isFunction as u } from "./vue-components.es24.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
+ }));
3
8
  export {
4
- s as isFunction,
5
- i as isObject,
6
- t as isRecordOrArray
9
+ a as clone,
10
+ n as cloneTrait,
11
+ b as runtimeFiberAsPromise
7
12
  };
@@ -1,4 +1,7 @@
1
- const o = (n) => typeof n == "function";
1
+ import { isFunction as c } from "./vue-components.es24.js";
2
+ const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
2
3
  export {
3
- o as isFunction
4
+ s as isFunction,
5
+ i as isObject,
6
+ t as isRecordOrArray
4
7
  };
@@ -1,13 +1,44 @@
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
- }
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
+ };
11
41
  export {
12
- c as getOmegaStore
42
+ a as dual,
43
+ f as isFunction
13
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.es27.js";
5
+ import D from "./vue-components.es28.js";
6
6
 
7
7
  const J = /* @__PURE__ */ w({
8
8
  inheritAttrs: !1,
@@ -1,4 +1,13 @@
1
- import f from "./vue-components.es25.js";
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
+ }
2
11
  export {
3
- f as default
12
+ c as getOmegaStore
4
13
  };
@@ -1,117 +1,4 @@
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
- });
1
+ import f from "./vue-components.es25.js";
115
2
  export {
116
- b as default
3
+ f as default
117
4
  };
@@ -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
+ };
@@ -1,5 +1,5 @@
1
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.es27.js";
2
+ import o from "./vue-components.es28.js";
3
3
 
4
4
  export {
5
5
  o as default
@@ -1,19 +1,20 @@
1
- import { useForm as j } from "@tanstack/vue-form";
2
- import { S as E } from "effect-app";
3
- import { isObject as O } from "./vue-components.es22.js";
4
- import { computed as v, onUnmounted as P, onMounted as I, onBeforeUnmount as N, provide as R } from "vue";
5
- import A from "./vue-components.es6.js";
6
- import { generateMetaFromSchema as D } from "./vue-components.es10.js";
7
- const F = Symbol("OmegaForm"), $ = (d, i, o) => {
1
+ import { useForm as F } from "@tanstack/vue-form";
2
+ import { S as P, Fiber as v } from "effect-app";
3
+ import { runtimeFiberAsPromise as E } from "./vue-components.es22.js";
4
+ import { isObject as O } from "./vue-components.es23.js";
5
+ import { computed as S, onUnmounted as I, onMounted as R, onBeforeUnmount as A, provide as N } from "vue";
6
+ import D from "./vue-components.es6.js";
7
+ import { generateMetaFromSchema as J } from "./vue-components.es10.js";
8
+ const K = Symbol("OmegaForm"), k = (d, i, n) => {
8
9
  if (!d) throw new Error("Schema is required");
9
- const S = E.standardSchemaV1(d), { filterItems: b, meta: a } = D(d), n = v(() => {
10
- if (o?.persistency?.id)
11
- return o.persistency.id;
10
+ const b = P.standardSchemaV1(d), { filterItems: g, meta: a } = J(d), o = S(() => {
11
+ if (n?.persistency?.id)
12
+ return n.persistency.id;
12
13
  const e = window.location.pathname, r = Object.keys(a);
13
14
  return `${e}-${r.join("-")}`;
14
- }), g = () => {
15
+ }), V = () => {
15
16
  const e = new URLSearchParams(window.location.search);
16
- e.delete(n.value);
17
+ e.delete(o.value);
17
18
  const r = new URL(window.location.href);
18
19
  r.search = e.toString(), window.history.replaceState({}, "", r.toString());
19
20
  };
@@ -22,16 +23,16 @@ const F = Symbol("OmegaForm"), $ = (d, i, o) => {
22
23
  r[s] && O(r[s]) ? (e[s] || (e[s] = {}), m(e[s], r[s])) : e[s] = r[s];
23
24
  return e;
24
25
  }
25
- const V = v(() => {
26
- if (i?.defaultValues && !o?.persistency?.overrideDefaultValues)
26
+ const L = S(() => {
27
+ if (i?.defaultValues && !n?.persistency?.overrideDefaultValues)
27
28
  return i?.defaultValues;
28
29
  let e;
29
- const r = o?.persistency;
30
+ const r = n?.persistency;
30
31
  if (!r?.policies || r.policies.length === 0) return {};
31
32
  if (r.policies.includes("querystring"))
32
33
  try {
33
- const t = new URLSearchParams(window.location.search).get(n.value);
34
- g(), t && (e = JSON.parse(t));
34
+ const t = new URLSearchParams(window.location.search).get(o.value);
35
+ V(), t && (e = JSON.parse(t));
35
36
  } catch (s) {
36
37
  console.error(s);
37
38
  }
@@ -43,9 +44,9 @@ const F = Symbol("OmegaForm"), $ = (d, i, o) => {
43
44
  if (s)
44
45
  try {
45
46
  const t = JSON.parse(
46
- s.getItem(n.value) || "{}"
47
+ s.getItem(o.value) || "{}"
47
48
  );
48
- s.removeItem(n.value), e = t;
49
+ s.removeItem(o.value), e = t;
49
50
  } catch (t) {
50
51
  console.error(t);
51
52
  }
@@ -56,25 +57,28 @@ const F = Symbol("OmegaForm"), $ = (d, i, o) => {
56
57
  const s = i?.defaultValues;
57
58
  return m(s, e);
58
59
  }
59
- }), l = j({
60
+ }), l = F({
60
61
  ...i,
61
62
  validators: {
62
- onSubmit: S,
63
+ onSubmit: b,
63
64
  ...i?.validators || {}
64
65
  },
65
- onSubmit: i?.onSubmit ? ({ formApi: e, meta: r, value: s }) => i.onSubmit?.({
66
- formApi: e,
67
- meta: r,
68
- value: s
69
- }) : void 0,
70
- defaultValues: V.value
71
- }), L = () => {
66
+ onSubmit: i?.onSubmit ? ({ formApi: e, meta: r, value: s }) => {
67
+ const t = i.onSubmit({
68
+ formApi: e,
69
+ meta: r,
70
+ value: s
71
+ });
72
+ return v.isFiber(t) && v.isRuntimeFiber(t) ? E(t) : t;
73
+ } : void 0,
74
+ defaultValues: L.value
75
+ }), U = () => {
72
76
  Object.keys(a).forEach((e) => {
73
77
  l.setFieldValue(e, void 0);
74
78
  });
75
79
  }, p = (e) => e.reduce((r, s) => {
76
80
  const t = s.split(".");
77
- return t.reduce((c, u, U) => (U === t.length - 1 ? c[u] = l.getFieldValue(s) : c[u] = c[u] ?? {}, c[u]), r), r;
81
+ return t.reduce((c, u, j) => (j === t.length - 1 ? c[u] = l.getFieldValue(s) : c[u] = c[u] ?? {}, c[u]), r), r;
78
82
  }, {}), w = (e) => {
79
83
  if (e) {
80
84
  if (Array.isArray(e.keys))
@@ -86,38 +90,38 @@ const F = Symbol("OmegaForm"), $ = (d, i, o) => {
86
90
  return l.store.state.values;
87
91
  }
88
92
  }, f = () => {
89
- const e = o?.persistency;
93
+ const e = n?.persistency;
90
94
  if (!(!e?.policies || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
91
95
  const r = e.policies.includes("local") ? localStorage : sessionStorage;
92
96
  if (!r) return;
93
97
  const s = w(e);
94
- return r.setItem(n.value, JSON.stringify(s));
98
+ return r.setItem(o.value, JSON.stringify(s));
95
99
  }
96
100
  }, y = () => {
97
- const e = o?.persistency;
101
+ const e = n?.persistency;
98
102
  if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
99
103
  const r = w(e), s = new URLSearchParams(window.location.search);
100
- s.set(n.value, JSON.stringify(r));
104
+ s.set(o.value, JSON.stringify(r));
101
105
  const t = new URL(window.location.href);
102
106
  t.search = s.toString(), window.history.replaceState({}, "", t.toString());
103
107
  }
104
108
  };
105
- P(f), I(() => {
109
+ I(f), R(() => {
106
110
  window.addEventListener("beforeunload", f), window.addEventListener("blur", y);
107
- }), N(() => {
111
+ }), A(() => {
108
112
  window.removeEventListener("beforeunload", f), window.removeEventListener("blur", y);
109
113
  });
110
114
  const h = Object.assign(l, {
111
115
  meta: a,
112
- filterItems: b,
113
- clear: L
116
+ filterItems: g,
117
+ clear: U
114
118
  });
115
- return R(F, h), Object.assign(h, {
116
- Input: A,
119
+ return N(K, h), Object.assign(h, {
120
+ Input: D,
117
121
  Field: l.Field
118
122
  });
119
123
  };
120
124
  export {
121
- F as OmegaFormKey,
122
- $ as useOmegaForm
125
+ K as OmegaFormKey,
126
+ k as useOmegaForm
123
127
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@effect-app/vue-components",
3
- "version": "0.17.0",
3
+ "version": "0.18.1",
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": "3.2.4",
57
- "@effect-app/vue": "2.54.4"
56
+ "@effect-app/vue": "2.54.5",
57
+ "effect-app": "3.3.0"
58
58
  },
59
59
  "scripts": {
60
60
  "build": "pnpm build:run",
@@ -62,7 +62,7 @@
62
62
  "docs:dev": "vitepress dev docs",
63
63
  "docs:build": "vitepress build docs",
64
64
  "docs:serve": "vitepress serve docs",
65
- "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src",
65
+ "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src stories .storybook",
66
66
  "ncu": "ncu",
67
67
  "clean": "rm -rf dist",
68
68
  "autofix": "pnpm lint --fix",
@@ -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?: (props: {
59
- formApi: OmegaFormParams<From, To>
60
- meta: any
61
- value: To
62
- }) => Promise<any> | any
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,7 @@
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 { computed, type ComputedRef, getCurrentInstance, onBeforeMount, watch } from "vue"
70
+ import { computed, getCurrentInstance, onBeforeMount, watch } from "vue"
71
71
  import { getOmegaStore } from "./getOmegaStore"
72
72
  import { provideOmegaErrors } from "./OmegaErrorsContext"
73
73
  import { type FilterItems, type FormProps, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff"
@@ -110,20 +110,17 @@ const instance = getCurrentInstance()
110
110
  // we prefer to use the standard abstraction in Vue which separates props (going down) and event emits (going back up)
111
111
  // so if isLoading + @submit are provided, we wrap them into a Promise, so that TanStack Form can properly track the submitting state.
112
112
  // 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: ComputedRef<FormProps<From, To>["onSubmit"]> = computed(
114
- () => ({ value }) => {
115
- new Promise<void>((resolve) => {
116
- instance!.emit("submit", value)
117
- // even if the emit would be immediately handled, prop changes are not published/received immediately.
118
- // so we have to wait for the prop to change to true, and back to false again.
119
- const handle = watch(() => props.isLoading, (v) => {
120
- if (v) return
121
- resolve()
122
- handle.stop()
123
- })
113
+ const eventOnSubmit: FormProps<From, To>["onSubmit"] = ({ value }) =>
114
+ new Promise<void>((resolve) => {
115
+ instance!.emit("submit", value)
116
+ // even if the emit would be immediately handled, prop changes are not published/received immediately.
117
+ // so we have to wait for the prop to change to true, and back to false again.
118
+ const handle = watch(() => props.isLoading, (v) => {
119
+ if (v) return
120
+ resolve()
121
+ handle.stop()
124
122
  })
125
- }
126
- )
123
+ })
127
124
 
128
125
  const localForm = props.form || !props.schema
129
126
  ? undefined
@@ -132,7 +129,7 @@ const localForm = props.form || !props.schema
132
129
  {
133
130
  ...props,
134
131
  onSubmit: typeof props.isLoading !== "undefined"
135
- ? eventOnSubmit.value
132
+ ? eventOnSubmit
136
133
  : props.onSubmit
137
134
  },
138
135
  props.omegaConfig
@@ -2,7 +2,8 @@
2
2
  /* eslint-disable @typescript-eslint/no-explicit-any */
3
3
 
4
4
  import { type DeepKeys, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, useForm } from "@tanstack/vue-form"
5
- import { S } from "effect-app"
5
+ import { Fiber, S } from "effect-app"
6
+ import { runtimeFiberAsPromise } from "effect-app/utils"
6
7
  import { isObject } from "effect/Predicate"
7
8
  import { computed, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, provide } from "vue"
8
9
  import { type InputProps } from "./InputProps"
@@ -216,12 +217,17 @@ export const useOmegaForm = <
216
217
  ...(tanstackFormOptions?.validators || {})
217
218
  },
218
219
  onSubmit: tanstackFormOptions?.onSubmit
219
- ? ({ formApi, meta, value }) =>
220
- tanstackFormOptions.onSubmit?.({
220
+ ? ({ formApi, meta, value }) => {
221
+ const r = tanstackFormOptions.onSubmit!({
221
222
  formApi: formApi as OmegaFormApi<From, To>,
222
223
  meta,
223
224
  value: value as unknown as To
224
225
  })
226
+ if (Fiber.isFiber(r) && Fiber.isRuntimeFiber(r)) {
227
+ return runtimeFiberAsPromise(r)
228
+ }
229
+ return r
230
+ }
225
231
  : undefined,
226
232
  defaultValues: defaultValues.value as any
227
233
  }) satisfies OmegaFormApi<To, From>