@effect-app/vue-components 1.8.2 → 1.8.3

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

@@ -8,6 +8,10 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
         label: string;
         type?: TypeOverride;
         validators?: FieldValidators<From>;
+        options?: {
+            title: string;
+            value: string;
+        }[];
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;

package/dist/vue-components.es6.js

@@ -1,9 +1,9 @@
 (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)}})();
-import { defineComponent as I, getCurrentInstance as V, useId as $, computed as n, onMounted as g, ref as k, watchEffect as q, watch as D, onUnmounted as F, useAttrs as L, renderSlot as O, normalizeProps as h, guardReactiveProps as A, createElementVNode as M, normalizeClass as R, createBlock as S, createCommentVNode as U, unref as z, openBlock as T, mergeProps as Z } from "vue";
-import { useStore as j } from "@tanstack/vue-form";
-import G from "./vue-components.es25.js";
+import { defineComponent as N, getCurrentInstance as B, useId as I, computed as n, onMounted as g, ref as V, watchEffect as k, watch as q, onUnmounted as D, renderSlot as F, normalizeProps as h, guardReactiveProps as L, createElementVNode as O, normalizeClass as M, createBlock as R, createCommentVNode as S, unref as U, openBlock as z, mergeProps as A } from "vue";
+import { useStore as T } from "@tanstack/vue-form";
+import Z from "./vue-components.es25.js";
 
-const te = /* @__PURE__ */ I({
+const Y = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -11,82 +11,83 @@ const te = /* @__PURE__ */ I({
     meta: {},
     label: {},
     type: {},
-    validators: {}
+    validators: {},
+    options: {}
   },
   setup(v) {
-    const e = v, y = V()?.appContext.components.VTextField, a = $(), l = e.field, o = j(l.store, (t) => t), m = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), d = n(() => o.value.value), f = n(() => o.value.meta.errors ?? []), b = n(
+    const e = v, y = B()?.appContext.components.VTextField, a = I(), l = e.field, o = T(l.store, (t) => t), m = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), p = n(() => o.value.value), d = n(() => o.value.meta.errors ?? []), b = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        f.value.map((t) => t?.message).filter(Boolean)
+        d.value.map((t) => t?.message).filter(Boolean)
       )
-    ), C = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), x = (t) => {
+    ), C = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), w = (t) => {
       C(t) && e.meta?.type !== "boolean" ? e.field.handleChange(
         e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
       ) : e.field.handleChange(t);
     };
     g(() => {
-      if (!d.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
+      if (!p.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
         const t = o.value.meta.isDirty;
         l.setValue(null), l.setMeta((r) => ({ ...r, isDirty: t }));
       }
     });
-    const { mapError: _, removeError: c, showErrors: w, showErrorsOn: E } = e.field.form.errorContext, s = k(!1);
-    q(() => {
-      (w.value || E === "onChange") && (s.value = !0);
+    const { mapError: x, removeError: f, showErrors: E, showErrorsOn: P } = e.field.form.errorContext, s = V(!1);
+    k(() => {
+      (E.value || P === "onChange") && (s.value = !0);
     });
     const i = () => {
       s.value = !0;
     };
     g(() => {
-      d.value && i();
+      p.value && i();
     });
-    const p = n(() => !s.value && m.value !== "select" ? [] : b.value);
-    D(
-      f,
+    const c = n(() => !s.value && m.value !== "select" ? [] : b.value);
+    q(
+      d,
       (t) => {
-        t.length ? _({
+        t.length ? x({
           inputId: a,
           errors: o.value.meta.errors.map((r) => r.message).filter(Boolean),
           label: e.label
-        }) : c(a);
+        }) : f(a);
       }
-    ), F(() => {
-      c(a);
+    ), D(() => {
+      f(a);
     });
-    const P = (t) => {
+    const _ = (t) => {
       const r = {
-        get(K, B, Q) {
-          return B === "handleChange" ? x : Reflect.get(...arguments);
+        get(H, $, J) {
+          return $ === "handleChange" ? w : Reflect.get(...arguments);
         }
       };
       return new Proxy(t, r);
-    }, N = L(), u = n(() => ({
+    }, u = n(() => ({
       inputProps: {
-        ...N,
         id: a,
         required: e.meta?.required,
         minLength: e.meta?.type === "string" && e.meta?.minLength,
         maxLength: e.meta?.type === "string" && e.meta?.maxLength,
         max: e.meta?.type === "number" && e.meta?.maximum,
         min: e.meta?.type === "number" && e.meta?.minimum,
-        errorMessages: p.value,
-        error: !!p.value.length,
+        errorMessages: c.value,
+        error: !!c.value.length,
         setRealDirty: i,
         type: m.value,
-        label: `${e.label}${e.meta?.required ? " *" : ""}`
+        label: `${e.label}${e.meta?.required ? " *" : ""}`,
+        options: e.options
       },
-      field: P(e.field)
+      field: _(e.field)
     }));
-    return (t, r) => O(t.$slots, "default", h(A({ ...u.value.inputProps, field: u.value.field })), () => [
-      M("div", {
-        class: R(t.$attrs.class),
+    return (t, r) => F(t.$slots, "default", h(L({ ...t.$attrs, ...u.value.inputProps, field: u.value.field })), () => [
+      O("div", {
+        class: M(t.$attrs.class),
         onFocusout: i
       }, [
-        z(y) ? (T(), S(G, h(Z({ key: 0 }, u.value)), null, 16)) : U("", !0)
+        U(y) ? (z(), R(Z, h(A({ key: 0 }, { ...t.$attrs, ...u.value })), null, 16)) : S("", !0)
       ], 34)
     ]);
   }
 });
 export {
-  te as default
+  Y as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,12 +1,12 @@
 <template>
-  <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field }">
+  <slot v-bind="{ ...$attrs, ...inputProps.inputProps, field: inputProps.field }">
     <div
       :class="$attrs.class"
       @focusout="setRealDirty"
     >
       <OmegaInputVuetify
         v-if="vuetified"
-        v-bind="inputProps"
+        v-bind="{ ...$attrs, ...inputProps }"
       />
     </div>
   </slot>
@@ -18,7 +18,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, onMounted, onUnmounted, ref, useAttrs, useId, watch, watchEffect } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -33,6 +33,9 @@ const props = defineProps<{
   label: string
   type?: TypeOverride
   validators?: FieldValidators<From>
+
+  // TODO: these should really be optional, depending on the input type (and the custom input type for custom inputs :s)
+  options?: { title: string; value: string }[]
 }>()
 
 const instance = getCurrentInstance()
@@ -159,11 +162,8 @@ const wrapField = (field: OmegaFieldInternalApi<From, Name>) => {
   return proxy3 as typeof field
 }
 
-const attrs = useAttrs()
-
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   inputProps: {
-    ...attrs,
     id,
     required: props.meta?.required,
     minLength: props.meta?.type === "string" && props.meta?.minLength,
@@ -174,7 +174,8 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     error: !!showedErrors.value.length,
     setRealDirty,
     type: fieldType.value,
-    label: `${props.label}${props.meta?.required ? " *" : ""}`
+    label: `${props.label}${props.meta?.required ? " *" : ""}`,
+    options: props.options
   },
 
   field: wrapField(props.field)