@effect-app/vue-components 2.7.9 → 2.7.11

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

@@ -3,13 +3,16 @@ import { type OmegaError } from "./OmegaFormStuff";
 type __VLS_Props = {
     generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[];
     errors: OmegaError[];
+    hideErrorDetails?: boolean;
 };
 declare var __VLS_6: {
     errors: OmegaError[];
     showedGeneralErrors: string[];
-};
+}, __VLS_13: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
+} & {
+    icon?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/vue-components.es20.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode(".v-enter-from[data-v-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(r,t){const i=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(i&&i.call(this),this.shadowRoot){const d=document.createElement("style");d.appendChild(document.createTextNode(".v-enter-from[data-v-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),this.shadowRoot.appendChild(d)}},e.call(window.customElements,r,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const r=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode('.v-enter-from[data-v-6b2bf87e],.v-leave-to[data-v-6b2bf87e]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6b2bf87e],.v-leave-active[data-v-6b2bf87e]{display:grid;transition:all .15s}.v-enter-to[data-v-6b2bf87e],.v-leave-from[data-v-6b2bf87e]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6b2bf87e]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6b2bf87e]{min-height:0}.error-list[data-v-6b2bf87e]{list-style-position:inside}.error-list [data-v-6b2bf87e]::marker{margin:0;padding:0}.error-alert-content[data-v-6b2bf87e]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-6b2bf87e]{font-weight:700;position:relative;color:var(--error-color, #c92a2a);cursor:pointer}.error-link[data-v-6b2bf87e]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(from var(--error-color, #c92a2a) r g b / .5)}.text-h6[data-v-6b2bf87e]{font-weight:700;font-size:1.25em}.error-message[data-v-6b2bf87e]{font-style:italic}.error-item[data-v-6b2bf87e]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-6b2bf87e]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-6b2bf87e]{display:flex;gap:1.5em}.container svg[data-v-6b2bf87e]{width:3em}.container .single-error[data-v-6b2bf87e]{display:inline-block}')),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import r from "./vue-components.es33.js";
 
 import o from "./vue-components.es35.js";
-const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-d4ffe76f"]]);
+const m = /* @__PURE__ */ o(r, [["__scopeId", "data-v-6b2bf87e"]]);
 export {
-  e as default
+  m as default
 };

package/dist/vue-components.es33.js

@@ -1,91 +1,113 @@
-import { defineComponent as y, getCurrentInstance as E, computed as C, createBlock as n, openBlock as e, Transition as x, withCtx as o, createElementBlock as d, createCommentVNode as B, renderSlot as b, normalizeProps as I, guardReactiveProps as w, resolveDynamicComponent as s, unref as a, normalizeClass as V, createElementVNode as c, toDisplayString as u, Fragment as p, renderList as _, createTextVNode as k } from "vue";
-import { mdiLink as N } from "@mdi/js";
-import { useIntl as z } from "./vue-components.es3.js";
-const D = {
+import { defineComponent as _, getCurrentInstance as B, computed as V, createBlock as i, openBlock as e, Transition as x, withCtx as u, createElementBlock as o, createCommentVNode as p, renderSlot as g, normalizeProps as b, guardReactiveProps as I, resolveDynamicComponent as h, unref as d, normalizeClass as v, createElementVNode as n, toDisplayString as a, Fragment as w, renderList as y, createTextVNode as C } from "vue";
+import { useIntl as L } from "./vue-components.es3.js";
+const M = {
   key: 0,
   class: "error-alert"
-}, G = { class: "text-h6 mb-3" }, L = { class: "font-weight-medium" }, M = { class: "error-message" }, O = ["href"], P = { key: 1 }, A = /* @__PURE__ */ y({
+}, j = { class: "container" }, D = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, N = { class: "text-h6" }, z = {
+  key: 0,
+  class: "error-list"
+}, G = ["for"], H = { key: 1 }, T = /* @__PURE__ */ _({
   __name: "OmegaErrorsInternal",
   props: {
     generalErrors: {},
-    errors: {}
+    errors: {},
+    hideErrorDetails: { type: Boolean }
   },
-  setup(t) {
-    const m = E()?.appContext.components.VAlert, h = t, { trans: g } = z(), f = C(() => h.generalErrors ? h.generalErrors.filter((i) => !!i).flatMap(
-      (i) => Object.values(i).filter((l) => !!l).flatMap(
-        (l) => l.filter(
+  setup(l) {
+    const c = B()?.appContext.components.VAlert, k = l, { trans: E } = L(), m = V(() => k.generalErrors ? k.generalErrors.filter((s) => !!s).flatMap(
+      (s) => Object.values(s).filter((t) => !!t).flatMap(
+        (t) => t.filter(
           (r) => !!r?.message
         ).map((r) => r.message)
       )
     ) : []);
-    return (i, l) => (e(), n(x, null, {
-      default: o(() => [
-        t.errors.length || f.value.length ? (e(), d("div", D, [
-          b(i.$slots, "default", I(w({ errors: t.errors, showedGeneralErrors: f.value })), () => [
-            (e(), n(s(a(m) ? "v-alert" : "div"), {
-              class: V([a(m) ? "mb-4" : "error-alert-content", "mb-4"]),
+    return (s, t) => (e(), i(x, null, {
+      default: u(() => [
+        l.errors.length || m.value.length ? (e(), o("div", M, [
+          g(s.$slots, "default", b(I({ errors: l.errors, showedGeneralErrors: m.value })), () => [
+            (e(), i(h(d(c) ? "v-alert" : "div"), {
+              class: v([d(c) ? "mb-4" : "error-alert-content", "mb-4"]),
               type: "error",
               variant: "tonal",
               role: "alert",
               "aria-live": "polite"
             }, {
-              default: o(() => [
-                c("div", G, u(a(g)("form.includes_error")) + ": ", 1),
-                t.errors.length ? (e(), n(s(t.errors.length > 1 ? "ul" : "div"), {
-                  key: 0,
-                  class: "error-list"
-                }, {
-                  default: o(() => [
-                    (e(!0), d(p, null, _(t.errors, (r) => (e(), n(s(t.errors.length > 1 ? "li" : "div"), {
-                      key: r.inputId,
-                      class: "error-item"
-                    }, {
-                      default: o(() => [
-                        c("div", L, u(r.label), 1),
-                        c("div", M, [
-                          (e(), n(s(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
-                            default: o(() => [
-                              (e(!0), d(p, null, _(r.errors, (v) => (e(), n(s(r.errors.length > 1 ? "li" : "span"), { key: v }, {
-                                default: o(() => [
-                                  k(u(v), 1)
-                                ]),
-                                _: 2
-                              }, 1024))), 128))
-                            ]),
-                            _: 2
-                          }, 1024))
-                        ]),
-                        c("a", {
-                          href: `#${r.inputId}`,
-                          class: "error-link"
-                        }, [
-                          (e(), n(s(a(m) ? "v-icon" : "i"), {
-                            icon: a(N),
-                            "aria-hidden": "true"
-                          }, {
-                            default: o(() => [...l[0] || (l[0] = [
-                              c("i", null, "🔗", -1)
-                            ])]),
-                            _: 1
-                          }, 8, ["icon"])),
-                          k(" " + u(a(g)("form.fix_input")), 1)
-                        ], 8, O)
-                      ]),
-                      _: 2
-                    }, 1024))), 128))
-                  ]),
-                  _: 1
-                })) : (e(), d("span", P, u(f.value[0]), 1))
+              default: u(() => [
+                n("div", j, [
+                  g(s.$slots, "icon", {}, () => [
+                    d(c) ? p("", !0) : (e(), o("svg", D, [...t[0] || (t[0] = [
+                      n("path", {
+                        d: "M16 2H8L2 8V16L8 22H16L22 16V8L16 2Z",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      }, null, -1),
+                      n("path", {
+                        d: "M12 8V12",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      }, null, -1),
+                      n("path", {
+                        d: "M12 16.0195V16",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      }, null, -1)
+                    ])]))
+                  ], !0),
+                  n("div", null, [
+                    n("div", N, a(d(E)("form.includes_error")) + ": ", 1),
+                    l.errors.length ? (e(), o("ul", z, [
+                      (e(!0), o(w, null, y(l.errors, (r) => (e(), o("li", {
+                        key: r.inputId,
+                        class: "error-item"
+                      }, [
+                        n("div", null, [
+                          n("label", {
+                            for: r.inputId,
+                            class: "error-link"
+                          }, a(r.label), 9, G),
+                          t[1] || (t[1] = C(" " + a(" ") + " ", -1)),
+                          l.hideErrorDetails ? p("", !0) : (e(), o("div", {
+                            key: 0,
+                            class: v(["error-message", r.errors.length < 2 && "single-error"])
+                          }, [
+                            (e(), i(h(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
+                              default: u(() => [
+                                (e(!0), o(w, null, y(r.errors, (f) => (e(), i(h(r.errors.length > 1 ? "li" : "span"), { key: f }, {
+                                  default: u(() => [
+                                    C(a(f), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024))), 128))
+                              ]),
+                              _: 2
+                            }, 1024))
+                          ], 2))
+                        ])
+                      ]))), 128))
+                    ])) : (e(), o("span", H, a(m.value[0]), 1))
+                  ])
+                ])
               ]),
-              _: 1
+              _: 3
             }, 8, ["class"]))
           ], !0)
-        ])) : B("", !0)
+        ])) : p("", !0)
       ]),
       _: 3
     }));
   }
 });
 export {
-  A as default
+  T as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.7.9",
+  "version": "2.7.11",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -53,8 +53,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.12.0",
-    "@effect-app/vue": "2.92.2"
+    "@effect-app/vue": "2.92.2",
+    "effect-app": "3.12.0"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -14,57 +14,84 @@
           aria-live="polite"
           class="mb-4"
         >
-          <div class="text-h6 mb-3">
-            {{ trans("form.includes_error") }}:
-          </div>
-          <component
-            :is="errors.length > 1 ? 'ul' : 'div'"
-            v-if="errors.length"
-            class="error-list"
-          >
-            <component
-              :is="errors.length > 1 ? 'li' : 'div'"
-              v-for="error in errors"
-              :key="error.inputId"
-              class="error-item"
-            >
-              <div class="font-weight-medium">
-                {{ error.label }}
-              </div>
-              <div class="error-message">
-                <component
-                  :is="error.errors.length > 1 ? 'ul' : 'div'"
-                  class="error-list"
-                >
-                  <component
-                    :is="error.errors.length > 1
-                    ? 'li'
-                    : 'span'"
-                    v-for="e in error.errors"
-                    :key="e"
-                  >
-                    {{ e }}
-                  </component>
-                </component>
+          <div class="container">
+            <slot name="icon">
+              <svg
+                v-if="!vuetified"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 2H8L2 8V16L8 22H16L22 16V8L16 2Z"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12 8V12"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12 16.0195V16"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </slot>
+            <div>
+              <div class="text-h6">
+                {{ trans("form.includes_error") }}:
               </div>
-              <a
-                :href="`#${error.inputId}`"
-                class="error-link"
+              <ul
+                v-if="errors.length"
+                class="error-list"
               >
-                <component
-                  :is="vuetified ? 'v-icon' : 'i'"
-                  :icon="mdiLink"
-                  aria-hidden="true"
+                <li
+                  v-for="error in errors"
+                  :key="error.inputId"
+                  class="error-item"
                 >
-                  <i>&#128279;</i>
-                </component>
-                {{ trans("form.fix_input") }}
-              </a>
-            </component>
-          </component>
-          <span v-else>
-            {{ showedGeneralErrors[0] }}
-          </span>
+                  <div>
+                    <label
+                      :for="error.inputId"
+                      class="error-link"
+                    >{{ error.label }}</label>
+                    {{ " " }}
+                    <div
+                      v-if="!hideErrorDetails"
+                      class="error-message"
+                      :class="error.errors.length < 2 && 'single-error'"
+                    >
+                      <component
+                        :is="error.errors.length > 1 ? 'ul' : 'div'"
+                        class="error-list"
+                      >
+                        <component
+                          :is="error.errors.length > 1
+                          ? 'li'
+                          : 'span'"
+                          v-for="e in error.errors"
+                          :key="e"
+                        >
+                          {{ e }}
+                        </component>
+                      </component>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+              <span v-else>
+                {{ showedGeneralErrors[0] }}
+              </span>
+            </div>
+          </div>
         </component>
       </slot>
     </div>
@@ -72,7 +99,6 @@
 </template>
 
 <script setup lang="ts">
-import { mdiLink } from "@mdi/js"
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
@@ -85,6 +111,7 @@ const props = defineProps<
   {
     generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[]
     errors: OmegaError[]
+    hideErrorDetails?: boolean
   }
 >()
 
@@ -145,52 +172,64 @@ const showedGeneralErrors = computed(() => {
 
 .error-list {
   list-style-position: inside;
-}
 
-div.error-list {
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 1.5em;
-  align-items: start;
+  ::marker {
+    margin: 0;
+    padding: 0;
+  }
 }
 
-@container (max-width: 27.125rem) {
-  div.error-list {
-    grid-template-columns: auto 1fr;
-  }
+.error-alert-content {
+  background-color: var(--error-background, #fff5f5);
+  color: var(--error-color, #c92a2a);
+  padding: 1em;
+}
 
-  .error-link {
-    grid-column: 1 / -1;
-    justify-self: end;
+.error-link {
+  font-weight: bold;
+  position: relative;
+  color: var(--error-color, #c92a2a);
+  cursor: pointer;
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: rgba(from var(--error-color, #c92a2a) r g b / 0.5);
   }
 }
 
-@container (max-width: 17.75rem) {
-  div.error-list {
-    grid-template-columns: 1fr;
-  }
+.text-h6 {
+  font-weight: bold;
+  font-size: 1.25em;
+}
 
-  .error-message {
-    grid-column: 1 / -1;
-  }
+.error-message {
+  font-style: italic;
 }
 
 .error-item {
-  display: contents;
-}
+  margin-bottom: 0.5em;
+  overflow: hidden;
 
-a {
-  min-width: min-content;
+  > div {
+    float: right;
+    width: 100%;
+    max-width: calc(100% - 1.5em);
+  }
 }
 
-.error-link {
-  align-items: center;
-  color: inherit;
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-  padding-bottom: 1em;
-  text-decoration: none;
+.container {
+  display: flex;
+  gap: 1.5em;
+
+  svg {
+    width: 3em;
+  }
+  .single-error {
+    display: inline-block;
+  }
 }
 </style>