@effect-app/vue-components 3.0.6 → 3.1.0

package/dist/vue-components.es38.js

@@ -1,194 +1,34 @@
-import { defineComponent as k, resolveComponent as b, createElementBlock as v, openBlock as n, createBlock as a, createCommentVNode as u, resolveDynamicComponent as g, mergeProps as o, createSlots as d, withCtx as r, renderSlot as m, normalizeProps as s, guardReactiveProps as P, unref as C, Fragment as V, renderList as U } from "vue";
-import { getInputType as c } from "./vue-components.es12.js";
-const w = /* @__PURE__ */ k({
-  inheritAttrs: !1,
-  __name: "OmegaInputVuetify",
+import { defineComponent as m, createElementBlock as d, openBlock as u, withModifiers as f, createElementVNode as l, unref as s, renderSlot as a } from "vue";
+import { useStore as b } from "@tanstack/vue-form";
+import { usePreventClose as p } from "./vue-components.es11.js";
+import { getOmegaStore as c } from "./vue-components.es53.js";
+const S = ["disabled"], V = /* @__PURE__ */ m({
+  __name: "OmegaWrapper",
   props: {
-    inputProps: {},
-    field: {},
-    state: {}
+    form: {},
+    disabled: { type: Boolean },
+    subscribe: {}
   },
-  emits: ["focus", "blur"],
-  setup(e) {
-    return (l, i) => {
-      const y = b("v-text-field"), p = b("v-textarea"), f = b("v-radio"), h = b("v-radio-group"), q = b("v-select"), $ = b("v-autocomplete");
-      return n(), v("div", {
-        class: "omega-input",
-        onFocusout: i[4] || (i[4] = (t) => l.$emit("blur", t)),
-        onFocusin: i[5] || (i[5] = (t) => l.$emit("focus", t))
+  setup(o) {
+    const e = o, i = b(
+      e.form.store,
+      (t) => t.isSubmitting
+    ), n = c(
+      e.form,
+      e.subscribe
+    );
+    return e.form.ignorePreventCloseEvents || p(() => e.form.useStore((t) => t.isDirty)), (t, r) => (u(), d("form", {
+      novalidate: "",
+      onSubmit: r[0] || (r[0] = f((v) => o.form.handleSubmit(), ["prevent", "stop"]))
+    }, [
+      l("fieldset", {
+        disabled: s(i) || o.disabled
       }, [
-        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (n(), a(g(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), o({
-          key: 0,
-          id: e.inputProps.id,
-          name: e.field.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          ripple: ""
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          onChange: i[0] || (i[0] = (t) => e.field.handleChange(t.target.checked))
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" || e.inputProps.type === "date" ? (n(), a(y, o({
-          key: 1,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          type: C(c)(e.inputProps.type),
-          name: e.field.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          "onUpdate:modelValue": e.field.handleChange
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "text" ? (n(), a(p, o({
-          key: 2,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          name: e.field.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          "onUpdate:modelValue": e.field.handleChange
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "number" || e.inputProps.type === "int" || e.inputProps.type === "range" ? (n(), a(g(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), o({
-          key: 3,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          min: e.inputProps.min,
-          max: e.inputProps.max,
-          type: e.inputProps.type === "int" ? "number" : e.inputProps.type,
-          name: e.field.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          "onUpdate:modelValue": i[1] || (i[1] = (t) => {
-            t || t === 0 ? e.field.handleChange(Number(t)) : e.field.handleChange(void 0);
-          })
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
-        e.inputProps.type === "radio" ? (n(), a(h, o({
-          key: 4,
-          id: e.inputProps.id,
-          name: e.field.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          "onUpdate:modelValue": e.field.handleChange
-        }), d({
-          default: r(() => [
-            (n(!0), v(V, null, U(e.inputProps.options, (t) => (n(), a(f, {
-              key: t.value,
-              label: t.title,
-              value: t.value
-            }, null, 8, ["label", "value"]))), 128))
-          ]),
-          _: 2
-        }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (n(), a(q, o({
-          key: 5,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "select",
-          required: e.inputProps.required,
-          multiple: e.inputProps.type === "multiple",
-          chips: e.inputProps.type === "multiple",
-          name: e.field.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          onClear: i[2] || (i[2] = (t) => e.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.field.handleChange
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (n(), a($, o({
-          key: 6,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "autocomplete",
-          multiple: e.inputProps.type === "autocompletemultiple",
-          required: e.inputProps.required,
-          name: e.field.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          chips: e.inputProps.type === "autocompletemultiple"
-        }, l.$attrs, {
-          "model-value": e.state.value,
-          onClear: i[3] || (i[3] = (t) => e.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.field.handleChange
-        }), d({ _: 2 }, [
-          l.$slots.label ? {
-            name: "label",
-            fn: r(() => [
-              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : u("", !0)
-      ], 32);
-    };
+        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
+      ], 8, S)
+    ], 32));
   }
 });
 export {
-  w as default
+  V as default
 };

package/dist/vue-components.es40.js

@@ -1,5 +1,5 @@
 (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 o from "./vue-components.es38.js";
+import o from "./vue-components.es30.js";
 
 export {
   o as default

package/dist/vue-components.es7.js

@@ -1,7 +1,7 @@
 (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 N, computed as n, getCurrentInstance as k, useAttrs as q, useSlots as B, useId as S, renderSlot as d, normalizeProps as s, guardReactiveProps as p, createElementVNode as w, normalizeClass as F, createBlock as I, createCommentVNode as L, unref as A, openBlock as O, mergeProps as R, createSlots as V, withCtx as z } from "vue";
 import { useStore as f } from "@tanstack/vue-form";
-import T from "./vue-components.es38.js";
+import T from "./vue-components.es30.js";
 
 const H = /* @__PURE__ */ N({
   inheritAttrs: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.19.3",

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -246,11 +246,12 @@ export type StringFieldMeta = BaseFieldMeta & {
 }
 
 export type NumberFieldMeta = BaseFieldMeta & {
-  type: "number" | "int"
+  type: "number"
   minimum?: number
   maximum?: number
   exclusiveMinimum?: number
   exclusiveMaximum?: number
+  refinement?: "int"
 }
 
 export type SelectFieldMeta = BaseFieldMeta & {
@@ -682,7 +683,8 @@ export const createMeta = <T = any>(
     // if this is S.Int (a refinement), set the type and skip following "from"
     // otherwise we'd lose the "Int" information and get "number" instead
     if (titleType === "Int" || titleType === "int") {
-      meta["type"] = "int"
+      meta["type"] = "number"
+      meta["refinement"] = "int"
       // don't follow "from" for Int refinements
     } else if ("from" in property) {
       return createMeta<T>({
@@ -888,66 +890,28 @@ export const generateInputStandardSchemaFromFieldMeta = (
       }
       break
 
-    case "int": {
-      // create a custom integer schema with translations
-      // S.Number with empty message, then S.int with integer message
-      schema = S
-        .Number
-        .annotations({
-          message: () => trans("validation.empty")
-        })
-        .pipe(
-          S.int({ message: (issue) => trans("validation.integer.expected", { actualValue: String(issue.actual) }) })
-        )
-      if (typeof meta.minimum === "number") {
-        schema = schema.pipe(S.greaterThanOrEqualTo(meta.minimum)).annotations({
-          message: () =>
-            trans(meta.minimum === 0 ? "validation.number.positive" : "validation.number.min", {
-              minimum: meta.minimum,
-              isExclusive: true
-            })
-        })
-      }
-      if (typeof meta.maximum === "number") {
-        schema = schema.pipe(S.lessThanOrEqualTo(meta.maximum)).annotations({
-          message: () =>
-            trans("validation.number.max", {
-              maximum: meta.maximum,
-              isExclusive: true
-            })
-        })
-      }
-      if (typeof meta.exclusiveMinimum === "number") {
-        schema = schema.pipe(S.greaterThan(meta.exclusiveMinimum)).annotations({
-          message: () =>
-            trans(meta.exclusiveMinimum === 0 ? "validation.number.positive" : "validation.number.min", {
-              minimum: meta.exclusiveMinimum,
-              isExclusive: false
-            })
-        })
-      }
-      if (typeof meta.exclusiveMaximum === "number") {
-        schema = schema.pipe(S.lessThan(meta.exclusiveMaximum)).annotations({
-          message: () =>
-            trans("validation.number.max", {
-              maximum: meta.exclusiveMaximum,
-              isExclusive: false
-            })
-        })
-      }
-      break
-    }
-
     case "number":
-      schema = S.Number.annotations({
-        message: () => trans("validation.number.expected", { actualValue: "NaN" })
-      })
-
-      if (meta.required) {
-        schema.annotations({
-          message: () => trans("validation.empty")
+      if (meta.refinement === "int") {
+        schema = S
+          .Number
+          .annotations({
+            message: () => trans("validation.empty")
+          })
+          .pipe(
+            S.int({ message: (issue) => trans("validation.integer.expected", { actualValue: String(issue.actual) }) })
+          )
+      } else {
+        schema = S.Number.annotations({
+          message: () => trans("validation.number.expected", { actualValue: "NaN" })
         })
+
+        if (meta.required) {
+          schema.annotations({
+            message: () => trans("validation.empty")
+          })
+        }
       }
+
       if (typeof meta.minimum === "number") {
         schema = schema.pipe(S.greaterThanOrEqualTo(meta.minimum)).annotations({
           message: () =>

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -81,12 +81,12 @@
     </v-textarea>
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
-      v-if="inputProps.type === 'number' || inputProps.type === 'int' || inputProps.type === 'range'"
+      v-if="inputProps.type === 'number' || inputProps.type === 'range'"
       :id="inputProps.id"
       :required="inputProps.required"
       :min="inputProps.min"
       :max="inputProps.max"
-      :type="inputProps.type === 'int' ? 'number' : inputProps.type"
+      :type="inputProps.type"
       :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -162,10 +162,10 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     required: isRequired.value,
     minLength: props.meta?.type === "string" && props.meta?.minLength,
     maxLength: props.meta?.type === "string" && props.meta?.maxLength,
-    max: props.meta?.type === "number"
+    max: (props.meta?.type === "number")
       && (props.meta?.maximum
         ?? (typeof props.meta?.exclusiveMaximum === "number" && props.meta.exclusiveMaximum - 1)),
-    min: props.meta?.type === "number"
+    min: (props.meta?.type === "number")
       && (props.meta?.minimum
         ?? (typeof props.meta?.exclusiveMinimum === "number" && props.meta.exclusiveMinimum + 1)),
     errorMessages: errors.value,

package/dist/vue-components.es31.js

@@ -1,4 +0,0 @@
-import f from "./vue-components.es18.js";
-export {
-  f as default
-};

package/dist/vue-components.es36.js

@@ -1,34 +0,0 @@
-import { defineComponent as m, createElementBlock as d, openBlock as u, withModifiers as f, createElementVNode as l, unref as s, renderSlot as a } from "vue";
-import { useStore as b } from "@tanstack/vue-form";
-import { usePreventClose as p } from "./vue-components.es11.js";
-import { getOmegaStore as c } from "./vue-components.es53.js";
-const S = ["disabled"], V = /* @__PURE__ */ m({
-  __name: "OmegaWrapper",
-  props: {
-    form: {},
-    disabled: { type: Boolean },
-    subscribe: {}
-  },
-  setup(o) {
-    const e = o, i = b(
-      e.form.store,
-      (t) => t.isSubmitting
-    ), n = c(
-      e.form,
-      e.subscribe
-    );
-    return e.form.ignorePreventCloseEvents || p(() => e.form.useStore((t) => t.isDirty)), (t, r) => (u(), d("form", {
-      novalidate: "",
-      onSubmit: r[0] || (r[0] = f((v) => o.form.handleSubmit(), ["prevent", "stop"]))
-    }, [
-      l("fieldset", {
-        disabled: s(i) || o.disabled
-      }, [
-        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
-      ], 8, S)
-    ], 32));
-  }
-});
-export {
-  V as default
-};