@effect-app/vue-components 0.1.3 → 0.2.1

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

@@ -36,6 +36,7 @@ declare const _default: <From, To>(__VLS_props: NonNullable<Awaited<typeof __VLS
                 title: string;
                 value: string;
             }[];
+            onFocusout: () => void;
         }) => any) | undefined;
     };
     emit: {};

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

@@ -1,12 +1,18 @@
 import type { InputProps } from "./InputProps";
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: Event) => any) | undefined;
+        readonly onFocus?: ((event: Event) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onFocus"> & {
         inputProps: InputProps<T>;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: {
+        (e: "focus", event: Event): void;
+        (e: "blur", event: Event): void;
+    };
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -34,6 +34,7 @@ declare const _default: <To>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup
                 title: string;
                 value: string;
             }[];
+            onFocusout: () => void;
         }) => any) | undefined;
     };
     emit: {};

package/dist/vue-components.es15.js

@@ -1,10 +1,10 @@
 (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 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";
-import { useStore as j } from "@tanstack/vue-form";
-import { useOmegaErrors as G } from "./vue-components.es4.js";
-import H from "./vue-components.es18.js";
+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 { useStore as N } from "@tanstack/vue-form";
+import { useOmegaErrors as R } from "./vue-components.es4.js";
+import j from "./vue-components.es18.js";
 
-const Y = /* @__PURE__ */ A({
+const Q = /* @__PURE__ */ C({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -15,73 +15,73 @@ const Y = /* @__PURE__ */ A({
     type: {},
     validators: {}
   },
-  setup(q) {
-    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(() => {
+  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(() => {
       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";
-    }), s = n(() => a.value.value), p = n(
+    }), m = n(() => a.value.value), p = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
       )
     );
-    _(
-      () => [!!s.value],
+    q(
+      () => [!!m.value],
       () => {
         var t, r;
-        p.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
+        p.value.length && !m.value && !((t = e.meta) != null && t.required) && u.setValue(
           ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
         );
       }
-    ), L(() => {
+    ), S(() => {
       var t, r;
-      !s.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+      !m.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
     });
-    const m = O(!1), I = () => {
-      m.value = !0;
-    }, { addError: $, formSubmissionAttempts: k, removeError: w } = G();
-    P(() => {
-      k.value > 0 && (m.value = !0);
+    const s = A(!1), f = () => {
+      s.value = !0;
+    }, { addError: k, formSubmissionAttempts: w, removeError: B } = R();
+    D(() => {
+      w.value > 0 && (s.value = !0);
     });
-    const f = n(() => !m.value && i.value !== "select" ? [] : p.value);
-    _(
+    const d = n(() => !s.value && i.value !== "select" ? [] : p.value);
+    q(
       () => a.value.meta.errors,
       () => {
-        a.value.meta.errors.length ? $({
+        a.value.meta.errors.length ? k({
           inputId: o,
           errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
           label: e.label
-        }) : w(o);
+        }) : B(o);
       }
-    ), S();
-    const d = n(() => {
-      var t, r, c, v, g, y, h, b, x, V;
+    );
+    const c = n(() => {
+      var t, r, v, 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" && ((c = e.meta) == null ? void 0 : c.minLength),
-        maxLength: ((v = e.meta) == null ? void 0 : v.type) === "string" && ((g = e.meta) == null ? void 0 : g.maxLength),
-        max: ((y = e.meta) == null ? void 0 : y.type) === "number" && ((h = e.meta) == null ? void 0 : h.maximum),
-        min: ((b = e.meta) == null ? void 0 : b.type) === "number" && ((x = e.meta) == null ? void 0 : x.minimum),
+        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((v = e.meta) == null ? void 0 : v.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: f.value,
-        error: !!f.value.length,
+        errorMessages: d.value,
+        error: !!d.value.length,
         field: e.field,
-        setRealDirty: I,
+        setRealDirty: f,
         type: i.value,
-        label: `${e.label}${(V = e.meta) != null && V.required ? " *" : ""}`,
+        label: `${e.label}${(_ = e.meta) != null && _.required ? " *" : ""}`,
         options: e.options
       };
     });
-    return (t, r) => D(t.$slots, "default", M(R(d.value)), () => [
-      z(E) ? (F(), T(H, N({
+    return (t, r) => F(t.$slots, "default", E(c.value, { onFocusout: f }), () => [
+      T($) ? (U(), M(j, E({
         key: 0,
-        "input-props": d.value
-      }, t.$attrs), null, 16, ["input-props"])) : U("", !0)
+        "input-props": c.value
+      }, t.$attrs), null, 16, ["input-props"])) : P("", !0)
     ]);
   }
 });
 export {
-  Y as default
+  Q as default
 };

package/dist/vue-components.es18.js

@@ -1,17 +1,35 @@
-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";
-import { mdiRefresh as u } from "@mdi/js";
-const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
+import { defineComponent as k, resolveComponent as i, createElementBlock as m, openBlock as p, createBlock as l, createCommentVNode as n, mergeProps as s, normalizeClass as v, createVNode as u, unref as t, withCtx as y } from "vue";
+import { mdiRefresh as a } from "@mdi/js";
+const U = /* @__PURE__ */ k({
+  inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
     inputProps: {}
   },
+  emits: ["focus", "blur"],
   setup(C) {
-    return (e, o) => {
-      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");
-      return r(), m("div", q, [
-        e.inputProps.type === "email" || e.inputProps.type === "string" ? (r(), l(d, i({
+    return (e, r) => {
+      const b = i("v-checkbox"), d = i("v-text-field"), h = i("v-textarea"), f = i("v-select"), P = i("v-icon"), g = i("v-btn"), V = i("v-autocomplete");
+      return p(), m("div", {
+        class: "omega-input",
+        onFocusout: r[4] || (r[4] = (o) => e.$emit("blur", o)),
+        onFocusin: r[5] || (r[5] = (o) => e.$emit("focus", o))
+      }, [
+        e.inputProps.type === "boolean" ? (p(), l(b, s({
           key: 0,
           id: e.inputProps.id,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "model-value": e.inputProps.modelValue,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          ripple: "",
+          onChange: r[0] || (r[0] = (o) => e.inputProps.field.handleChange(o.target.checked))
+        }), null, 16, ["id", "name", "label", "model-value", "error-messages", "error"])) : n("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" ? (p(), l(d, s({
+          key: 1,
+          id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
           "max-length": e.inputProps.maxLength,
@@ -22,10 +40,9 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, e.$attrs, {
-          "onUpdate:modelValue": e.inputProps.field.handleChange,
-          onBlur: e.inputProps.setRealDirty
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue", "onBlur"])) : p("", !0),
-        e.inputProps.type === "text" ? (r(), l(h, i({ key: 1 }, e.$attrs, {
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : n("", !0),
+        e.inputProps.type === "text" ? (p(), l(h, s({ key: 2 }, e.$attrs, {
           id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
@@ -36,11 +53,10 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
           "model-value": e.inputProps.modelValue,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
-          "onUpdate:modelValue": e.inputProps.field.handleChange,
-          onBlur: e.inputProps.setRealDirty
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue", "onBlur"])) : p("", !0),
-        e.inputProps.type === "number" ? (r(), l(d, i({
-          key: 2,
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : n("", !0),
+        e.inputProps.type === "number" ? (p(), l(d, s({
+          key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
           min: e.inputProps.min,
@@ -52,16 +68,15 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, e.$attrs, {
-          "onUpdate:modelValue": o[0] || (o[0] = (a) => {
-            e.inputProps.field.handleChange(Number(a));
-          }),
-          onBlur: e.inputProps.setRealDirty
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error", "onBlur"])) : p("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (r(), m("div", {
-          key: 3,
-          class: g(e.inputProps.type !== "multiple" && "d-flex")
+          "onUpdate:modelValue": r[1] || (r[1] = (o) => {
+            e.inputProps.field.handleChange(Number(o));
+          })
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error"])) : n("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (p(), m("div", {
+          key: 4,
+          class: v(e.inputProps.type !== "multiple" && "d-flex")
         }, [
-          s(f, i({
+          u(f, s({
             id: e.inputProps.id,
             required: e.inputProps.required,
             multiple: e.inputProps.type === "multiple",
@@ -73,28 +88,27 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
             "error-messages": e.inputProps.errorMessages,
             error: e.inputProps.error
           }, e.$attrs, {
-            "onUpdate:modelValue": e.inputProps.field.handleChange,
-            onBlur: e.inputProps.setRealDirty
-          }), null, 16, ["id", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue", "onBlur"]),
-          e.inputProps.type === "select" ? (r(), l(y, {
+            "onUpdate:modelValue": e.inputProps.field.handleChange
+          }), null, 16, ["id", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue"]),
+          e.inputProps.type === "select" ? (p(), l(g, {
             key: 0,
             "variant-btn": "secondary",
-            "variant-icon": t(u),
+            "variant-icon": t(a),
             class: "mr-2",
             title: "Reset",
-            onClick: o[1] || (o[1] = (a) => e.inputProps.field.handleChange(void 0))
+            onClick: r[2] || (r[2] = (o) => e.inputProps.field.handleChange(void 0))
           }, {
-            default: v(() => [
-              s(P, { icon: t(u) }, null, 8, ["icon"])
+            default: y(() => [
+              u(P, { icon: t(a) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["variant-icon"])) : p("", !0)
-        ], 2)) : p("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (r(), m("div", {
-          key: 4,
-          class: g(e.inputProps.type !== "autocompletemultiple" && "d-flex")
+          }, 8, ["variant-icon"])) : n("", !0)
+        ], 2)) : n("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (p(), m("div", {
+          key: 5,
+          class: v(e.inputProps.type !== "autocompletemultiple" && "d-flex")
         }, [
-          s(b, i({
+          u(V, s({
             id: e.inputProps.id,
             multiple: e.inputProps.type === "autocompletemultiple",
             required: e.inputProps.required,
@@ -106,24 +120,23 @@ const q = { class: "omega-input" }, U = /* @__PURE__ */ V({
             error: e.inputProps.error,
             chips: e.inputProps.type === "autocompletemultiple"
           }, e.$attrs, {
-            "onUpdate:modelValue": e.inputProps.field.handleChange,
-            onBlur: e.inputProps.setRealDirty
-          }), null, 16, ["id", "multiple", "required", "name", "model-value", "label", "items", "error-messages", "error", "chips", "onUpdate:modelValue", "onBlur"]),
-          e.inputProps.type === "autocomplete" ? (r(), l(y, {
+            "onUpdate:modelValue": e.inputProps.field.handleChange
+          }), null, 16, ["id", "multiple", "required", "name", "model-value", "label", "items", "error-messages", "error", "chips", "onUpdate:modelValue"]),
+          e.inputProps.type === "autocomplete" ? (p(), l(g, {
             key: 0,
             "variant-btn": "secondary",
-            "variant-icon": t(u),
+            "variant-icon": t(a),
             class: "mr-2",
             title: "Reset",
-            onClick: o[2] || (o[2] = (a) => e.inputProps.field.handleChange(void 0))
+            onClick: r[3] || (r[3] = (o) => e.inputProps.field.handleChange(void 0))
           }, {
-            default: v(() => [
-              s(P, { icon: t(u) }, null, 8, ["icon"])
+            default: y(() => [
+              u(P, { icon: t(a) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["variant-icon"])) : p("", !0)
-        ], 2)) : p("", !0)
-      ]);
+          }, 8, ["variant-icon"])) : n("", !0)
+        ], 2)) : n("", !0)
+      ], 32);
     };
   }
 });

package/package.json

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

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -1,5 +1,21 @@
 <template>
-  <div class="omega-input">
+  <div
+    class="omega-input"
+    @focusout="$emit('blur', $event)"
+    @focusin="$emit('focus', $event)"
+  >
+    <v-checkbox
+      v-if="inputProps.type === 'boolean'"
+      :id="inputProps.id"
+      :name="inputProps.name"
+      :label="inputProps.label"
+      :model-value="inputProps.modelValue"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      ripple
+      @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
+    />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string'"
       :id="inputProps.id"
@@ -14,7 +30,6 @@
       :error="inputProps.error"
       v-bind="$attrs"
       @update:model-value="inputProps.field.handleChange"
-      @blur="inputProps.setRealDirty"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -30,7 +45,6 @@
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       @update:model-value="inputProps.field.handleChange"
-      @blur="inputProps.setRealDirty"
     />
     <v-text-field
       v-if="inputProps.type === 'number'"
@@ -50,7 +64,6 @@
           inputProps.field.handleChange(Number(e))
         }
       "
-      @blur="inputProps.setRealDirty"
     />
     <div
       v-if="inputProps.type === 'select' || inputProps.type === 'multiple'"
@@ -69,7 +82,6 @@
         :error="inputProps.error"
         v-bind="$attrs"
         @update:model-value="inputProps.field.handleChange"
-        @blur="inputProps.setRealDirty"
       />
       <v-btn
         v-if="inputProps.type === 'select'"
@@ -103,7 +115,6 @@
         :chips="inputProps.type === 'autocompletemultiple'"
         v-bind="$attrs"
         @update:model-value="inputProps.field.handleChange"
-        @blur="inputProps.setRealDirty"
       />
       <v-btn
         v-if="inputProps.type === 'autocomplete'"
@@ -126,6 +137,15 @@ import type { InputProps } from "./InputProps"
 defineProps<{
   inputProps: InputProps<T>
 }>()
+
+defineEmits<{
+  (e: "focus", event: Event): void
+  (e: "blur", event: Event): void
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <style>

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <slot v-bind="inputProps">
+  <slot v-bind="inputProps" @focusout="setRealDirty">
     <OmegaInputVuetify
       v-if="vuetified"
       :input-props="inputProps"
@@ -11,7 +11,6 @@
 <script setup lang="ts" generic="To">
 import { useStore } from "@tanstack/vue-form"
 import {
-  useAttrs,
   useId,
   computed,
   watch,
@@ -128,8 +127,6 @@ watch(
   },
 )
 
-const otherAttrs = useAttrs()
-
 const inputProps: ComputedRef<InputProps<To>> = computed(() => ({
   id,
   required: props.meta?.required,