@effect-app/vue-components 0.1.2 → 0.2.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.
Files changed (5) hide show
  1. package/dist/vue-components.es15.js +33 -32
  2. package/dist/vue-components.es18.js +38 -25
  3. package/package.json +1 -1
  4. package/src/components/OmegaForm/OmegaInputVuetify.vue +13 -0
  5. package/src/components/OmegaForm/OmegaInternalInput.vue +9 -1
package/dist/vue-components.es15.js CHANGED
@@ -1,10 +1,11 @@
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 C, getCurrentInstance as L, useId as O, computed as n, watch as V, onMounted as S, ref as $, watchEffect as A, useAttrs as P, renderSlot as D, normalizeProps as M, guardReactiveProps as R, createBlock as T, createCommentVNode as U, unref as z, openBlock as F } from "vue";
3
- import { useStore as N } from "@tanstack/vue-form";
4
- import { useOmegaErrors as j } from "./vue-components.es4.js";
5
- import G from "./vue-components.es18.js";
2
+ import { defineComponent as A, getCurrentInstance as B, useId as C, computed as n, watch as _, onMounted as L, ref as O, watchEffect as P, useAttrs as S, renderSlot as D, normalizeProps as M, guardReactiveProps as R, createBlock as T, createCommentVNode as U, unref as z, openBlock as F, mergeProps as N } from "vue";
3
+ import { useStore as j } from "@tanstack/vue-form";
4
+ import { useOmegaErrors as G } from "./vue-components.es4.js";
5
+ import H from "./vue-components.es18.js";
6
6
 
7
- const X = /* @__PURE__ */ C({
7
+ const Y = /* @__PURE__ */ A({
8
+ inheritAttrs: !1,
8
9
  __name: "OmegaInternalInput",
9
10
  props: {
10
11
  field: {},
@@ -15,46 +16,46 @@ const X = /* @__PURE__ */ C({
15
16
  validators: {}
16
17
  },
17
18
  setup(q) {
18
- const e = q, l = L(), E = l == null ? void 0 : l.appContext.components.VTextField, o = O(), u = e.field, a = N(u.store, (t) => t), i = n(() => {
19
+ const e = q, l = B(), E = l == null ? void 0 : l.appContext.components.VTextField, o = C(), u = e.field, a = j(u.store, (t) => t), i = n(() => {
19
20
  var t, r;
20
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";
21
- }), m = n(() => a.value.value), p = n(
22
+ }), s = n(() => a.value.value), p = n(
22
23
  () => (
23
24
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
25
  a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
25
26
  )
26
27
  );
27
- V(
28
- () => [!!m.value],
28
+ _(
29
+ () => [!!s.value],
29
30
  () => {
30
31
  var t, r;
31
- p.value.length && !m.value && !((t = e.meta) != null && t.required) && u.setValue(
32
+ p.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
32
33
  ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
33
34
  );
34
35
  }
35
- ), S(() => {
36
+ ), L(() => {
36
37
  var t, r;
37
- !m.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
38
+ !s.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
38
39
  });
39
- const s = $(!1), I = () => {
40
- s.value = !0;
41
- }, { addError: k, formSubmissionAttempts: w, removeError: B } = j();
42
- A(() => {
43
- w.value > 0 && (s.value = !0);
40
+ const m = O(!1), I = () => {
41
+ m.value = !0;
42
+ }, { addError: $, formSubmissionAttempts: k, removeError: w } = G();
43
+ P(() => {
44
+ k.value > 0 && (m.value = !0);
44
45
  });
45
- const d = n(() => !s.value && i.value !== "select" ? [] : p.value);
46
- V(
46
+ const f = n(() => !m.value && i.value !== "select" ? [] : p.value);
47
+ _(
47
48
  () => a.value.meta.errors,
48
49
  () => {
49
- a.value.meta.errors.length ? k({
50
+ a.value.meta.errors.length ? $({
50
51
  inputId: o,
51
52
  errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
52
53
  label: e.label
53
- }) : B(o);
54
+ }) : w(o);
54
55
  }
55
- ), P();
56
- const f = n(() => {
57
- var t, r, c, v, g, y, h, b, x, _;
56
+ ), S();
57
+ const d = n(() => {
58
+ var t, r, c, v, g, y, h, b, x, V;
58
59
  return {
59
60
  id: o,
60
61
  required: (t = e.meta) == null ? void 0 : t.required,
@@ -64,23 +65,23 @@ const X = /* @__PURE__ */ C({
64
65
  min: ((b = e.meta) == null ? void 0 : b.type) === "number" && ((x = e.meta) == null ? void 0 : x.minimum),
65
66
  name: e.field.name,
66
67
  modelValue: e.field.state.value,
67
- errorMessages: d.value,
68
- error: !!d.value.length,
68
+ errorMessages: f.value,
69
+ error: !!f.value.length,
69
70
  field: e.field,
70
71
  setRealDirty: I,
71
72
  type: i.value,
72
- label: `${e.label}${(_ = e.meta) != null && _.required ? " *" : ""}`,
73
+ label: `${e.label}${(V = e.meta) != null && V.required ? " *" : ""}`,
73
74
  options: e.options
74
75
  };
75
76
  });
76
- return (t, r) => D(t.$slots, "default", M(R(f.value)), () => [
77
- z(E) ? (F(), T(G, {
77
+ return (t, r) => D(t.$slots, "default", M(R(d.value)), () => [
78
+ z(E) ? (F(), T(H, N({
78
79
  key: 0,
79
- "input-props": f.value
80
- }, null, 8, ["input-props"])) : U("", !0)
80
+ "input-props": d.value
81
+ }, t.$attrs), null, 16, ["input-props"])) : U("", !0)
81
82
  ]);
82
83
  }
83
84
  });
84
85
  export {
85
- X as default
86
+ Y as default
86
87
  };
package/dist/vue-components.es18.js CHANGED
@@ -1,17 +1,30 @@
1
- import { defineComponent as V, resolveComponent as n, createElementBlock as m, openBlock as r, createBlock as l, createCommentVNode as p, mergeProps as i, normalizeClass as g, createVNode as s, unref as t, withCtx as v } from "vue";
2
- import { mdiRefresh as u } from "@mdi/js";
3
- const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
1
+ import { defineComponent as k, resolveComponent as n, createElementBlock as m, openBlock as r, createBlock as l, createCommentVNode as p, mergeProps as i, normalizeClass as y, createVNode as u, unref as t, withCtx as v } from "vue";
2
+ import { mdiRefresh as a } from "@mdi/js";
3
+ const C = { class: "omega-input" }, U = /* @__PURE__ */ k({
4
4
  __name: "OmegaInputVuetify",
5
5
  props: {
6
6
  inputProps: {}
7
7
  },
8
- setup(C) {
8
+ setup(q) {
9
9
  return (e, o) => {
10
- const d = n("v-text-field"), h = n("v-textarea"), f = n("v-select"), P = n("v-icon"), y = n("v-btn"), b = n("v-autocomplete");
11
- return r(), m("div", q, [
12
- e.inputProps.type === "email" || e.inputProps.type === "string" ? (r(), l(d, i({
10
+ const h = n("v-checkbox"), d = n("v-text-field"), b = n("v-textarea"), f = n("v-select"), P = n("v-icon"), g = n("v-btn"), V = n("v-autocomplete");
11
+ return r(), m("div", C, [
12
+ e.inputProps.type === "boolean" ? (r(), l(h, i({
13
13
  key: 0,
14
14
  id: e.inputProps.id,
15
+ name: e.inputProps.name,
16
+ label: e.inputProps.label,
17
+ "model-value": e.inputProps.modelValue,
18
+ "error-messages": e.inputProps.errorMessages,
19
+ error: e.inputProps.error
20
+ }, e.$attrs, {
21
+ ripple: "",
22
+ onChange: o[0] || (o[0] = (s) => e.inputProps.field.handleChange(s.target.checked)),
23
+ onBlur: e.inputProps.setRealDirty
24
+ }), null, 16, ["id", "name", "label", "model-value", "error-messages", "error", "onBlur"])) : p("", !0),
25
+ e.inputProps.type === "email" || e.inputProps.type === "string" ? (r(), l(d, i({
26
+ key: 1,
27
+ id: e.inputProps.id,
15
28
  required: e.inputProps.required,
16
29
  "min-length": e.inputProps.minLength,
17
30
  "max-length": e.inputProps.maxLength,
@@ -25,7 +38,7 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
25
38
  "onUpdate:modelValue": e.inputProps.field.handleChange,
26
39
  onBlur: e.inputProps.setRealDirty
27
40
  }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue", "onBlur"])) : p("", !0),
28
- e.inputProps.type === "text" ? (r(), l(h, i({ key: 1 }, e.$attrs, {
41
+ e.inputProps.type === "text" ? (r(), l(b, i({ key: 2 }, e.$attrs, {
29
42
  id: e.inputProps.id,
30
43
  required: e.inputProps.required,
31
44
  "min-length": e.inputProps.minLength,
@@ -40,7 +53,7 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
40
53
  onBlur: e.inputProps.setRealDirty
41
54
  }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue", "onBlur"])) : p("", !0),
42
55
  e.inputProps.type === "number" ? (r(), l(d, i({
43
- key: 2,
56
+ key: 3,
44
57
  id: e.inputProps.id,
45
58
  required: e.inputProps.required,
46
59
  min: e.inputProps.min,
@@ -52,16 +65,16 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
52
65
  "error-messages": e.inputProps.errorMessages,
53
66
  error: e.inputProps.error
54
67
  }, e.$attrs, {
55
- "onUpdate:modelValue": o[0] || (o[0] = (a) => {
56
- e.inputProps.field.handleChange(Number(a));
68
+ "onUpdate:modelValue": o[1] || (o[1] = (s) => {
69
+ e.inputProps.field.handleChange(Number(s));
57
70
  }),
58
71
  onBlur: e.inputProps.setRealDirty
59
72
  }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error", "onBlur"])) : p("", !0),
60
73
  e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (r(), m("div", {
61
- key: 3,
62
- class: g(e.inputProps.type !== "multiple" && "d-flex")
74
+ key: 4,
75
+ class: y(e.inputProps.type !== "multiple" && "d-flex")
63
76
  }, [
64
- s(f, i({
77
+ u(f, i({
65
78
  id: e.inputProps.id,
66
79
  required: e.inputProps.required,
67
80
  multiple: e.inputProps.type === "multiple",
@@ -76,25 +89,25 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
76
89
  "onUpdate:modelValue": e.inputProps.field.handleChange,
77
90
  onBlur: e.inputProps.setRealDirty
78
91
  }), null, 16, ["id", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue", "onBlur"]),
79
- e.inputProps.type === "select" ? (r(), l(y, {
92
+ e.inputProps.type === "select" ? (r(), l(g, {
80
93
  key: 0,
81
94
  "variant-btn": "secondary",
82
- "variant-icon": t(u),
95
+ "variant-icon": t(a),
83
96
  class: "mr-2",
84
97
  title: "Reset",
85
- onClick: o[1] || (o[1] = (a) => e.inputProps.field.handleChange(void 0))
98
+ onClick: o[2] || (o[2] = (s) => e.inputProps.field.handleChange(void 0))
86
99
  }, {
87
100
  default: v(() => [
88
- s(P, { icon: t(u) }, null, 8, ["icon"])
101
+ u(P, { icon: t(a) }, null, 8, ["icon"])
89
102
  ]),
90
103
  _: 1
91
104
  }, 8, ["variant-icon"])) : p("", !0)
92
105
  ], 2)) : p("", !0),
93
106
  e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (r(), m("div", {
94
- key: 4,
95
- class: g(e.inputProps.type !== "autocompletemultiple" && "d-flex")
107
+ key: 5,
108
+ class: y(e.inputProps.type !== "autocompletemultiple" && "d-flex")
96
109
  }, [
97
- s(b, i({
110
+ u(V, i({
98
111
  id: e.inputProps.id,
99
112
  multiple: e.inputProps.type === "autocompletemultiple",
100
113
  required: e.inputProps.required,
@@ -109,16 +122,16 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
109
122
  "onUpdate:modelValue": e.inputProps.field.handleChange,
110
123
  onBlur: e.inputProps.setRealDirty
111
124
  }), null, 16, ["id", "multiple", "required", "name", "model-value", "label", "items", "error-messages", "error", "chips", "onUpdate:modelValue", "onBlur"]),
112
- e.inputProps.type === "autocomplete" ? (r(), l(y, {
125
+ e.inputProps.type === "autocomplete" ? (r(), l(g, {
113
126
  key: 0,
114
127
  "variant-btn": "secondary",
115
- "variant-icon": t(u),
128
+ "variant-icon": t(a),
116
129
  class: "mr-2",
117
130
  title: "Reset",
118
- onClick: o[2] || (o[2] = (a) => e.inputProps.field.handleChange(void 0))
131
+ onClick: o[3] || (o[3] = (s) => e.inputProps.field.handleChange(void 0))
119
132
  }, {
120
133
  default: v(() => [
121
- s(P, { icon: t(u) }, null, 8, ["icon"])
134
+ u(P, { icon: t(a) }, null, 8, ["icon"])
122
135
  ]),
123
136
  _: 1
124
137
  }, 8, ["variant-icon"])) : p("", !0)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@effect-app/vue-components",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "peerDependencies": {
5
5
  "@mdi/js": "^7.4.47",
6
6
  "@tanstack/vue-form": "^1.2.4",
package/src/components/OmegaForm/OmegaInputVuetify.vue CHANGED
@@ -1,5 +1,18 @@
1
1
  <template>
2
2
  <div class="omega-input">
3
+ <v-checkbox
4
+ v-if="inputProps.type === 'boolean'"
5
+ :id="inputProps.id"
6
+ :name="inputProps.name"
7
+ :label="inputProps.label"
8
+ :model-value="inputProps.modelValue"
9
+ :error-messages="inputProps.errorMessages"
10
+ :error="inputProps.error"
11
+ v-bind="$attrs"
12
+ ripple
13
+ @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
14
+ @blur="inputProps.setRealDirty"
15
+ />
3
16
  <v-text-field
4
17
  v-if="inputProps.type === 'email' || inputProps.type === 'string'"
5
18
  :id="inputProps.id"
package/src/components/OmegaForm/OmegaInternalInput.vue CHANGED
@@ -1,6 +1,10 @@
1
1
  <template>
2
2
  <slot v-bind="inputProps">
3
- <OmegaInputVuetify v-if="vuetified" :input-props="inputProps" />
3
+ <OmegaInputVuetify
4
+ v-if="vuetified"
5
+ :input-props="inputProps"
6
+ v-bind="$attrs"
7
+ />
4
8
  </slot>
5
9
  </template>
6
10
 
@@ -27,6 +31,10 @@ import { useOmegaErrors } from "./OmegaErrorsContext"
27
31
  import type { OmegaFieldInternalApi, InputProps } from "./InputProps"
28
32
  import OmegaInputVuetify from "./OmegaInputVuetify.vue"
29
33
 
34
+ defineOptions({
35
+ inheritAttrs: false,
36
+ })
37
+
30
38
  const props = defineProps<{
31
39
  field: OmegaFieldInternalApi<To>
32
40
  meta: MetaRecord<To>[NestedKeyOf<To>]