@effect-app/vue-components 0.2.5 → 0.2.7

package/dist/types/components/OmegaForm/OmegaInputVuetify.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly onFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onFocus"> & {
         inputProps: InputProps<T>;
+        vuetifyValue: unknown;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/vue-components.es15.js

@@ -1,5 +1,5 @@
 (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)}})();
-import { defineComponent as C, getCurrentInstance as L, useId as O, computed as n, watch as q, onMounted as S, ref as A, watchEffect as D, renderSlot as F, mergeProps as E, createBlock as M, createCommentVNode as P, unref as T, openBlock as U } from "vue";
+import { defineComponent as C, getCurrentInstance as L, useId as O, computed as l, watch as q, onMounted as S, ref as A, watchEffect as D, renderSlot as F, mergeProps as E, createBlock as M, createCommentVNode as P, unref as T, openBlock as U } from "vue";
 import { useStore as N } from "@tanstack/vue-form";
 import { useOmegaErrors as R } from "./vue-components.es4.js";
 import j from "./vue-components.es18.js";
@@ -16,34 +16,34 @@ const Q = /* @__PURE__ */ C({
     validators: {}
   },
   setup(I) {
-    const e = I, l = L(), $ = l == null ? void 0 : l.appContext.components.VTextField, o = O(), u = e.field, a = N(u.store, (t) => t), i = n(() => {
+    const e = I, n = L(), $ = n == null ? void 0 : n.appContext.components.VTextField, o = O(), u = e.field, a = N(u.store, (t) => t), p = l(() => {
       var t, r;
       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";
-    }), m = n(() => a.value.value), p = n(
+    }), s = l(() => a.value.value), f = l(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
       )
     );
     q(
-      () => [!!m.value],
+      () => [!!s.value],
       () => {
         var t, r;
-        p.value.length && !m.value && !((t = e.meta) != null && t.required) && u.setValue(
+        f.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
           ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
         );
       }
     ), S(() => {
       var t, r;
-      !m.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+      !s.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
     });
-    const s = A(!1), f = () => {
-      s.value = !0;
+    const i = A(!1), d = () => {
+      i.value = !0;
     }, { addError: k, formSubmissionAttempts: w, removeError: B } = R();
     D(() => {
-      w.value > 0 && (s.value = !0);
+      w.value > 0 && (i.value = !0);
     });
-    const d = n(() => !s.value && i.value !== "select" ? [] : p.value);
+    const v = l(() => !i.value && p.value !== "select" ? [] : f.value);
     q(
       () => a.value.meta.errors,
       () => {
@@ -54,31 +54,33 @@ const Q = /* @__PURE__ */ C({
         }) : B(o);
       }
     );
-    const c = n(() => {
-      var t, r, v, g, y, h, b, x, V, _;
+    const m = l(() => {
+      var t, r, c, g, y, h, b, x, V, _;
       return {
         id: o,
         required: (t = e.meta) == null ? void 0 : t.required,
-        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((v = e.meta) == null ? void 0 : v.minLength),
+        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
         maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
         max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
         min: ((x = e.meta) == null ? void 0 : x.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
         name: e.field.name,
         modelValue: e.field.state.value,
-        errorMessages: d.value,
-        error: !!d.value.length,
+        errorMessages: v.value,
+        error: !!v.value.length,
         field: e.field,
-        setRealDirty: f,
-        type: i.value,
+        setRealDirty: d,
+        type: p.value,
         label: `${e.label}${(_ = e.meta) != null && _.required ? " *" : ""}`,
         options: e.options
       };
     });
-    return (t, r) => F(t.$slots, "default", E(c.value, { onFocusout: f }), () => [
+    return (t, r) => F(t.$slots, "default", E(m.value, { onFocusout: d }), () => [
       T($) ? (U(), M(j, E({
         key: 0,
-        "input-props": c.value
-      }, t.$attrs), null, 16, ["input-props"])) : P("", !0)
+        "input-props": m.value
+      }, t.$attrs, {
+        "vuetify-value": m.value.field.state.value
+      }), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
     ]);
   }
 });

package/dist/vue-components.es18.js

@@ -1,14 +1,15 @@
-import { defineComponent as P, resolveComponent as i, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
+import { defineComponent as P, resolveComponent as u, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
 const b = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
-    inputProps: {}
+    inputProps: {},
+    vuetifyValue: {}
   },
   emits: ["focus", "blur"],
-  setup(v) {
+  setup(y) {
     return (e, r) => {
-      const a = i("v-checkbox"), u = i("v-text-field"), t = i("v-textarea"), m = i("v-select"), d = i("v-autocomplete");
+      const a = u("v-checkbox"), i = u("v-text-field"), t = u("v-textarea"), m = u("v-select"), d = u("v-autocomplete");
       return o(), g("div", {
         class: "omega-input",
         onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
@@ -19,14 +20,14 @@ const b = /* @__PURE__ */ P({
           id: e.inputProps.id,
           name: e.inputProps.name,
           label: e.inputProps.label,
-          "model-value": e.inputProps.field.state.value,
           "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
+          error: e.inputProps.error,
+          ripple: ""
         }, e.$attrs, {
-          ripple: "",
+          "model-value": e.vuetifyValue,
           onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
-        }), null, 16, ["id", "name", "label", "model-value", "error-messages", "error"])) : l("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(u, s({
+        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(i, s({
           key: 1,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -35,13 +36,14 @@ const b = /* @__PURE__ */ P({
           type: e.inputProps.type,
           name: e.inputProps.name,
           label: e.inputProps.label,
-          "model-value": e.inputProps.field.state.value,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, e.$attrs, {
+          "model-value": e.vuetifyValue,
           "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "text" ? (o(), n(t, s({ key: 2 }, e.$attrs, {
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "text" ? (o(), n(t, s({
+          key: 2,
           id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
@@ -49,12 +51,13 @@ const b = /* @__PURE__ */ P({
           type: e.inputProps.type,
           name: e.inputProps.name,
           label: e.inputProps.label,
-          "model-value": e.inputProps.field.state.value,
           "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
           "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "number" ? (o(), n(u, s({
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "number" ? (o(), n(i, s({
           key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -63,14 +66,14 @@ const b = /* @__PURE__ */ P({
           type: e.inputProps.type,
           name: e.inputProps.name,
           label: e.inputProps.label,
-          "model-value": e.inputProps.field.state.value,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, e.$attrs, {
+          "model-value": e.vuetifyValue,
           "onUpdate:modelValue": r[1] || (r[1] = (p) => {
             e.inputProps.field.handleChange(Number(p));
           })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error"])) : l("", !0),
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
         e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, s({
           key: 4,
           id: e.inputProps.id,
@@ -79,15 +82,15 @@ const b = /* @__PURE__ */ P({
           multiple: e.inputProps.type === "multiple",
           chips: e.inputProps.type === "multiple",
           name: e.inputProps.name,
-          "model-value": e.inputProps.field.state.value,
           label: e.inputProps.label,
           items: e.inputProps.options,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, e.$attrs, {
+          "model-value": e.vuetifyValue,
           onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
           "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue"])) : l("", !0),
+        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
         e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, s({
           key: 5,
           id: e.inputProps.id,
@@ -95,16 +98,16 @@ const b = /* @__PURE__ */ P({
           multiple: e.inputProps.type === "autocompletemultiple",
           required: e.inputProps.required,
           name: e.inputProps.name,
-          "model-value": e.inputProps.field.state.value,
           label: e.inputProps.label,
           items: e.inputProps.options,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
           chips: e.inputProps.type === "autocompletemultiple"
         }, e.$attrs, {
+          "model-value": e.vuetifyValue,
           onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
           "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "model-value", "label", "items", "error-messages", "error", "chips", "onUpdate:modelValue"])) : l("", !0)
+        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
       ], 32);
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -9,11 +9,11 @@
       :id="inputProps.id"
       :name="inputProps.name"
       :label="inputProps.label"
-      :model-value="inputProps.field.state.value"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
-      v-bind="$attrs"
       ripple
+      v-bind="$attrs"
+      :model-value="vuetifyValue"
       @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
     />
     <v-text-field
@@ -25,15 +25,14 @@
       :type="inputProps.type"
       :name="inputProps.name"
       :label="inputProps.label"
-      :model-value="inputProps.field.state.value"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
+      :model-value="vuetifyValue"
       @update:model-value="inputProps.field.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
-      v-bind="$attrs"
       :id="inputProps.id"
       :required="inputProps.required"
       :min-length="inputProps.minLength"
@@ -41,9 +40,10 @@
       :type="inputProps.type"
       :name="inputProps.name"
       :label="inputProps.label"
-      :model-value="inputProps.field.state.value"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
+      v-bind="$attrs"
+      :model-value="vuetifyValue"
       @update:model-value="inputProps.field.handleChange"
     />
     <v-text-field
@@ -55,10 +55,10 @@
       :type="inputProps.type"
       :name="inputProps.name"
       :label="inputProps.label"
-      :model-value="inputProps.field.state.value"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
+      :model-value="vuetifyValue"
       @update:model-value="
         (e: any) => {
           inputProps.field.handleChange(Number(e))
@@ -73,12 +73,12 @@
       :multiple="inputProps.type === 'multiple'"
       :chips="inputProps.type === 'multiple'"
       :name="inputProps.name"
-      :model-value="inputProps.field.state.value"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
+      :model-value="vuetifyValue"
       @clear="inputProps.field.handleChange(undefined)"
       @update:model-value="inputProps.field.handleChange"
     />
@@ -93,13 +93,13 @@
       :multiple="inputProps.type === 'autocompletemultiple'"
       :required="inputProps.required"
       :name="inputProps.name"
-      :model-value="inputProps.field.state.value"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
+      :model-value="vuetifyValue"
       @clear="inputProps.field.handleChange(undefined)"
       @update:model-value="inputProps.field.handleChange"
     />
@@ -111,6 +111,7 @@ import type { InputProps } from "./InputProps"
 
 defineProps<{
   inputProps: InputProps<T>
+  vuetifyValue: unknown
 }>()
 
 defineEmits<{

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -4,6 +4,7 @@
       v-if="vuetified"
       :input-props="inputProps"
       v-bind="$attrs"
+      :vuetify-value="inputProps.field.state.value"
     />
   </slot>
 </template>