@effect-app/vue-components 0.7.7 → 0.8.1

package/dist/types/components/OmegaForm/OmegaFormStuff.d.ts

@@ -15,7 +15,7 @@ export type OmegaInputProps<From, To> = {
     }[];
     type?: TypeOverride;
 };
-export type TypeOverride = "string" | "text" | "number" | "select" | "multiple" | "boolean" | "autocomplete" | "autocompletemultiple" | "switch";
+export type TypeOverride = "string" | "text" | "number" | "select" | "multiple" | "boolean" | "autocomplete" | "autocompletemultiple" | "switch" | "range";
 export interface OmegaError {
     label: string;
     inputId: string;

package/dist/vue-components.es24.js

@@ -16,41 +16,41 @@ const re = /* @__PURE__ */ q({
     validators: {}
   },
   setup(C) {
-    const t = C, o = L(), N = o == null ? void 0 : o.appContext.components.VTextField, s = P(), u = t.field, a = J(u.store, (e) => e), d = l(() => {
+    const t = C, o = L(), N = o == null ? void 0 : o.appContext.components.VTextField, s = P(), u = t.field, a = J(u.store, (e) => e), f = l(() => {
       var e, r;
       return t.type ? t.type : ((e = t.meta) == null ? void 0 : e.type) === "string" ? t.meta.format === "email" ? "email" : "string" : ((r = t.meta) == null ? void 0 : r.type) || "unknown";
-    }), i = l(() => a.value.value), $ = l(
+    }), n = l(() => a.value.value), $ = l(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         a.value.meta.errors.map((e) => e == null ? void 0 : e.message).filter(Boolean)
       )
     ), k = (e) => e == null || e === !1 || e === "" || Number.isNaN(e);
     w(
-      () => !!i.value,
-      (e) => {
-        var r;
-        k(e) && ((r = t.meta) == null ? void 0 : r.type) !== "boolean" && F(() => {
-          var n;
+      () => !!n.value,
+      () => {
+        var e;
+        k(n.value) && ((e = t.meta) == null ? void 0 : e.type) !== "boolean" && F(() => {
+          var r;
           u.setValue(
-            ((n = t.meta) == null ? void 0 : n.nullableOrUndefined) === "undefined" ? void 0 : null
+            ((r = t.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
           );
         });
       }
     ), x(() => {
       var e, r;
-      !i.value && !((e = t.meta) != null && e.required) && ((r = t.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+      !n.value && !((e = t.meta) != null && e.required) && ((r = t.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
     });
-    const { addError: B, removeError: I, showErrors: O, showErrorsOn: _ } = K(), m = S(!1);
+    const { addError: B, removeError: I, showErrors: O, showErrorsOn: _ } = K(), i = S(!1);
     T(() => {
-      (O.value || _ === "onChange") && (m.value = !0);
+      (O.value || _ === "onChange") && (i.value = !0);
     });
-    const p = () => {
-      m.value = !0;
+    const m = () => {
+      i.value = !0;
     };
     x(() => {
-      i.value && p();
+      n.value && m();
     });
-    const c = l(() => !m.value && d.value !== "select" ? [] : $.value);
+    const d = l(() => !i.value && f.value !== "select" ? [] : $.value);
     w(
       () => a.value.meta.errors,
       () => {
@@ -61,36 +61,36 @@ const re = /* @__PURE__ */ q({
         }) : I(s);
       }
     );
-    const f = l(() => {
-      var e, r, n, v, g, y, h, b, E, V;
+    const p = l(() => {
+      var e, r, c, v, g, y, h, b, E, V;
       return {
         id: s,
         required: (e = t.meta) == null ? void 0 : e.required,
-        minLength: ((r = t.meta) == null ? void 0 : r.type) === "string" && ((n = t.meta) == null ? void 0 : n.minLength),
+        minLength: ((r = t.meta) == null ? void 0 : r.type) === "string" && ((c = t.meta) == null ? void 0 : c.minLength),
         maxLength: ((v = t.meta) == null ? void 0 : v.type) === "string" && ((g = t.meta) == null ? void 0 : g.maxLength),
         max: ((y = t.meta) == null ? void 0 : y.type) === "number" && ((h = t.meta) == null ? void 0 : h.maximum),
         min: ((b = t.meta) == null ? void 0 : b.type) === "number" && ((E = t.meta) == null ? void 0 : E.minimum),
         name: t.field.name,
         modelValue: t.field.state.value,
-        errorMessages: c.value,
-        error: !!c.value.length,
+        errorMessages: d.value,
+        error: !!d.value.length,
         field: t.field,
-        setRealDirty: p,
-        type: d.value,
+        setRealDirty: m,
+        type: f.value,
         label: `${t.label}${(V = t.meta) != null && V.required ? " *" : ""}`,
         options: t.options
       };
     });
-    return (e, r) => z(e.$slots, "default", A(D(f.value)), () => [
+    return (e, r) => z(e.$slots, "default", A(D(p.value)), () => [
       M("div", {
         class: R(e.$attrs.class),
-        onFocusout: p
+        onFocusout: m
       }, [
         j(N) ? (G(), U(Q, H({
           key: 0,
-          "input-props": f.value
+          "input-props": p.value
         }, e.$attrs, {
-          "vuetify-value": f.value.field.state.value
+          "vuetify-value": p.value.field.state.value
         }), null, 16, ["input-props", "vuetify-value"])) : Z("", !0)
       ], 34)
     ]);

package/dist/vue-components.es27.js

@@ -1,5 +1,5 @@
-import { defineComponent as d, resolveComponent as s, createElementBlock as P, openBlock as o, createBlock as n, createCommentVNode as l, resolveDynamicComponent as g, mergeProps as i } from "vue";
-const b = /* @__PURE__ */ d({
+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";
+const b = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
@@ -9,13 +9,13 @@ const b = /* @__PURE__ */ d({
   emits: ["focus", "blur"],
   setup(y) {
     return (e, r) => {
-      const u = s("v-text-field"), a = s("v-textarea"), t = s("v-select"), m = s("v-autocomplete");
-      return o(), P("div", {
+      const a = s("v-text-field"), t = s("v-textarea"), m = s("v-select"), d = s("v-autocomplete");
+      return o(), g("div", {
         class: "omega-input",
         onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
         onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
       }, [
-        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (o(), n(g(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), i({
+        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (o(), n(u(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), i({
           key: 0,
           id: e.inputProps.id,
           name: e.inputProps.name,
@@ -27,7 +27,7 @@ const b = /* @__PURE__ */ d({
           "model-value": e.vuetifyValue,
           onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
         }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(u, i({
+        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(a, i({
           key: 1,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -42,7 +42,7 @@ const b = /* @__PURE__ */ d({
           "model-value": e.vuetifyValue,
           "onUpdate:modelValue": e.inputProps.field.handleChange
         }), 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(a, i({
+        e.inputProps.type === "text" ? (o(), n(t, i({
           key: 2,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -57,7 +57,7 @@ const b = /* @__PURE__ */ d({
           "model-value": e.vuetifyValue,
           "onUpdate:modelValue": e.inputProps.field.handleChange
         }), 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(u, i({
+        e.inputProps.type === "number" || e.inputProps.type === "range" ? (o(), n(u(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), i({
           key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -74,7 +74,7 @@ const b = /* @__PURE__ */ d({
             e.inputProps.field.handleChange(Number(p));
           })
         }), 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(t, i({
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, i({
           key: 4,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "select",
@@ -91,7 +91,7 @@ const b = /* @__PURE__ */ d({
           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", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(m, i({
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, i({
           key: 5,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "autocomplete",

package/package.json

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

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -39,6 +39,7 @@ export type TypeOverride =
   | "autocomplete"
   | "autocompletemultiple"
   | "switch"
+  | "range"
 
 export interface OmegaError {
   label: string

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -47,8 +47,9 @@
       :model-value="vuetifyValue"
       @update:model-value="inputProps.field.handleChange"
     />
-    <v-text-field
-      v-if="inputProps.type === 'number'"
+    <component
+      :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
+      v-if="inputProps.type === 'number' || inputProps.type === 'range'"
       :id="inputProps.id"
       :required="inputProps.required"
       :min="inputProps.min"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -79,8 +79,8 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 //watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
 watch(
   () => !!fieldValue.value,
-  value => {
-    if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
+  () => {
+    if (isFalsyButNotZero(fieldValue.value) && props.meta?.type !== "boolean") {
       nextTick(() => {
         fieldApi.setValue(
           props.meta?.nullableOrUndefined === "undefined" ? undefined : null,