@effect-app/vue-components 0.7.6 → 0.8.0

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

@@ -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 B, getCurrentInstance as L, useId as P, computed as n, watch as w, nextTick as S, onMounted as x, ref as T, watchEffect as z, renderSlot as A, normalizeProps as D, guardReactiveProps as F, createElementVNode as M, normalizeClass as N, createBlock as R, createCommentVNode as U, unref as j, openBlock as G, mergeProps as H } from "vue";
+import { defineComponent as q, getCurrentInstance as L, useId as P, computed as l, watch as w, nextTick as F, onMounted as x, ref as S, watchEffect as T, renderSlot as z, normalizeProps as A, guardReactiveProps as D, createElementVNode as M, normalizeClass as R, createBlock as U, createCommentVNode as Z, unref as j, openBlock as G, mergeProps as H } from "vue";
 import { useStore as J } from "@tanstack/vue-form";
 import { useOmegaErrors as K } from "./vue-components.es7.js";
 import Q from "./vue-components.es27.js";
 
-const te = /* @__PURE__ */ B({
+const re = /* @__PURE__ */ q({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -16,33 +16,33 @@ const te = /* @__PURE__ */ B({
     validators: {}
   },
   setup(C) {
-    const e = C, o = L(), $ = o == null ? void 0 : o.appContext.components.VTextField, s = P(), u = e.field, a = J(u.store, (t) => t), d = 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";
-    }), i = n(() => a.value.value), k = n(
+    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(() => {
+      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(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
+        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,
-      (t) => {
+      (e) => {
         var r;
-        !t && ((r = e.meta) == null ? void 0 : r.type) !== "boolean" && S(() => {
-          var l;
+        k(e) && ((r = t.meta) == null ? void 0 : r.type) !== "boolean" && F(() => {
+          var n;
           u.setValue(
-            ((l = e.meta) == null ? void 0 : l.nullableOrUndefined) === "undefined" ? void 0 : null
+            ((n = t.meta) == null ? void 0 : n.nullableOrUndefined) === "undefined" ? void 0 : null
           );
         });
       }
     ), x(() => {
-      var t, r;
-      !i.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+      var e, r;
+      !i.value && !((e = t.meta) != null && e.required) && ((r = t.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
     });
-    const { addError: I, removeError: O, showErrors: _, showErrorsOn: q } = K(), m = T(!1);
-    z(() => {
-      (_.value || q === "onChange") && (m.value = !0);
+    const { addError: B, removeError: I, showErrors: O, showErrorsOn: _ } = K(), m = S(!1);
+    T(() => {
+      (O.value || _ === "onChange") && (m.value = !0);
     });
     const p = () => {
       m.value = !0;
@@ -50,52 +50,52 @@ const te = /* @__PURE__ */ B({
     x(() => {
       i.value && p();
     });
-    const c = n(() => !m.value && d.value !== "select" ? [] : k.value);
+    const c = l(() => !m.value && d.value !== "select" ? [] : $.value);
     w(
       () => a.value.meta.errors,
       () => {
-        a.value.meta.errors.length ? I({
+        a.value.meta.errors.length ? B({
           inputId: s,
-          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
-          label: e.label
-        }) : O(s);
+          errors: a.value.meta.errors.map((e) => e.message).filter(Boolean),
+          label: t.label
+        }) : I(s);
       }
     );
-    const f = n(() => {
-      var t, r, l, v, g, y, h, b, E, V;
+    const f = l(() => {
+      var e, r, n, v, g, y, h, b, E, V;
       return {
         id: s,
-        required: (t = e.meta) == null ? void 0 : t.required,
-        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((l = e.meta) == null ? void 0 : l.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" && ((E = e.meta) == null ? void 0 : E.minimum),
-        name: e.field.name,
-        modelValue: e.field.state.value,
+        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),
+        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,
-        field: e.field,
+        field: t.field,
         setRealDirty: p,
         type: d.value,
-        label: `${e.label}${(V = e.meta) != null && V.required ? " *" : ""}`,
-        options: e.options
+        label: `${t.label}${(V = t.meta) != null && V.required ? " *" : ""}`,
+        options: t.options
       };
     });
-    return (t, r) => A(t.$slots, "default", D(F(f.value)), () => [
+    return (e, r) => z(e.$slots, "default", A(D(f.value)), () => [
       M("div", {
-        class: N(t.$attrs.class),
+        class: R(e.$attrs.class),
         onFocusout: p
       }, [
-        j($) ? (G(), R(Q, H({
+        j(N) ? (G(), U(Q, H({
           key: 0,
           "input-props": f.value
-        }, t.$attrs, {
+        }, e.$attrs, {
           "vuetify-value": f.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : U("", !0)
+        }), null, 16, ["input-props", "vuetify-value"])) : Z("", !0)
       ], 34)
     ]);
   }
 });
 export {
-  te as default
+  re as default
 };

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.6",
+  "version": "0.8.0",
   "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

@@ -71,12 +71,16 @@ const errors = computed(() =>
   fieldState.value.meta.errors.map((e: any) => e?.message).filter(Boolean),
 )
 
+const isFalsyButNotZero = (value: unknown): boolean => {
+  return value == null || value === false || value === "" || Number.isNaN(value)
+}
+
 // we remove value and errors when the field is empty and not required
 //watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
 watch(
   () => !!fieldValue.value,
   value => {
-    if (!value && props.meta?.type !== "boolean") {
+    if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
       nextTick(() => {
         fieldApi.setValue(
           props.meta?.nullableOrUndefined === "undefined" ? undefined : null,