@effect-app/vue-components 2.7.9 → 2.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@ import { type OmegaError } from "./OmegaFormStuff";
3
3
  type __VLS_Props = {
4
4
  generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[];
5
5
  errors: OmegaError[];
6
+ hideErrorDetails?: boolean;
6
7
  };
7
8
  declare var __VLS_6: {
8
9
  errors: OmegaError[];
@@ -1,8 +1,8 @@
1
- (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)}})();
1
+ (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");if(t.appendChild(document.createTextNode(".v-enter-from[data-v-0e82cff5],.v-leave-to[data-v-0e82cff5]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-0e82cff5],.v-leave-active[data-v-0e82cff5]{display:grid;transition:all .15s}.v-enter-to[data-v-0e82cff5],.v-leave-from[data-v-0e82cff5]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-0e82cff5]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-0e82cff5]{min-height:0}.error-list[data-v-0e82cff5]{list-style-position:inside}.error-list [data-v-0e82cff5]::marker{margin:0;padding:0}.error-alert-content[data-v-0e82cff5]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-0e82cff5]{font-weight:700;color:var(--error-color, #c92a2a)}.text-h6[data-v-0e82cff5]{font-weight:700}.error-message[data-v-0e82cff5]{font-style:italic}.error-item[data-v-0e82cff5]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-0e82cff5]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-0e82cff5]{display:flex;gap:1.5em;align-items:flex-start}.container svg[data-v-0e82cff5]{width:3em;margin-top:.5em}.container .single-error[data-v-0e82cff5]{display:inline-block}")),document.head.appendChild(t),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,a){const r=a.prototype.connectedCallback;return a.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode(".v-enter-from[data-v-0e82cff5],.v-leave-to[data-v-0e82cff5]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-0e82cff5],.v-leave-active[data-v-0e82cff5]{display:grid;transition:all .15s}.v-enter-to[data-v-0e82cff5],.v-leave-from[data-v-0e82cff5]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-0e82cff5]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-0e82cff5]{min-height:0}.error-list[data-v-0e82cff5]{list-style-position:inside}.error-list [data-v-0e82cff5]::marker{margin:0;padding:0}.error-alert-content[data-v-0e82cff5]{background-color:var(--error-background, #fff5f5);color:var(--error-color, #c92a2a);padding:1em}.error-link[data-v-0e82cff5]{font-weight:700;color:var(--error-color, #c92a2a)}.text-h6[data-v-0e82cff5]{font-weight:700}.error-message[data-v-0e82cff5]{font-style:italic}.error-item[data-v-0e82cff5]{margin-bottom:.5em;overflow:hidden}.error-item>div[data-v-0e82cff5]{float:right;width:100%;max-width:calc(100% - 1.5em)}.container[data-v-0e82cff5]{display:flex;gap:1.5em;align-items:flex-start}.container svg[data-v-0e82cff5]{width:3em;margin-top:.5em}.container .single-error[data-v-0e82cff5]{display:inline-block}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,a)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
2
  import r from "./vue-components.es33.js";
3
3
 
4
4
  import o from "./vue-components.es35.js";
5
- const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-d4ffe76f"]]);
5
+ const f = /* @__PURE__ */ o(r, [["__scopeId", "data-v-0e82cff5"]]);
6
6
  export {
7
- e as default
7
+ f as default
8
8
  };
@@ -1,91 +1,111 @@
1
- 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";
2
- import { mdiLink as N } from "@mdi/js";
3
- import { useIntl as z } from "./vue-components.es3.js";
4
- const D = {
1
+ import { defineComponent as E, getCurrentInstance as _, computed as B, createBlock as i, openBlock as e, Transition as V, withCtx as u, createElementBlock as o, createCommentVNode as h, renderSlot as x, normalizeProps as I, guardReactiveProps as L, resolveDynamicComponent as p, unref as d, normalizeClass as g, createElementVNode as n, toDisplayString as a, Fragment as v, renderList as w, createTextVNode as y } from "vue";
2
+ import { useIntl as M } from "./vue-components.es3.js";
3
+ const b = {
5
4
  key: 0,
6
5
  class: "error-alert"
7
- }, G = { class: "text-h6 mb-3" }, L = { class: "font-weight-medium" }, M = { class: "error-message" }, O = ["href"], P = { key: 1 }, A = /* @__PURE__ */ y({
6
+ }, j = { class: "container" }, D = {
7
+ key: 0,
8
+ viewBox: "0 0 24 24",
9
+ fill: "none",
10
+ xmlns: "http://www.w3.org/2000/svg"
11
+ }, N = { class: "text-h6" }, z = {
12
+ key: 0,
13
+ class: "error-list"
14
+ }, G = ["href"], H = { key: 1 }, T = /* @__PURE__ */ E({
8
15
  __name: "OmegaErrorsInternal",
9
16
  props: {
10
17
  generalErrors: {},
11
- errors: {}
18
+ errors: {},
19
+ hideErrorDetails: { type: Boolean }
12
20
  },
13
- setup(t) {
14
- const m = E()?.appContext.components.VAlert, h = t, { trans: g } = z(), f = C(() => h.generalErrors ? h.generalErrors.filter((i) => !!i).flatMap(
15
- (i) => Object.values(i).filter((l) => !!l).flatMap(
16
- (l) => l.filter(
21
+ setup(l) {
22
+ const c = _()?.appContext.components.VAlert, k = l, { trans: C } = M(), m = B(() => k.generalErrors ? k.generalErrors.filter((s) => !!s).flatMap(
23
+ (s) => Object.values(s).filter((t) => !!t).flatMap(
24
+ (t) => t.filter(
17
25
  (r) => !!r?.message
18
26
  ).map((r) => r.message)
19
27
  )
20
28
  ) : []);
21
- return (i, l) => (e(), n(x, null, {
22
- default: o(() => [
23
- t.errors.length || f.value.length ? (e(), d("div", D, [
24
- b(i.$slots, "default", I(w({ errors: t.errors, showedGeneralErrors: f.value })), () => [
25
- (e(), n(s(a(m) ? "v-alert" : "div"), {
26
- class: V([a(m) ? "mb-4" : "error-alert-content", "mb-4"]),
29
+ return (s, t) => (e(), i(V, null, {
30
+ default: u(() => [
31
+ l.errors.length || m.value.length ? (e(), o("div", b, [
32
+ x(s.$slots, "default", I(L({ errors: l.errors, showedGeneralErrors: m.value })), () => [
33
+ (e(), i(p(d(c) ? "v-alert" : "div"), {
34
+ class: g([d(c) ? "mb-4" : "error-alert-content", "mb-4"]),
27
35
  type: "error",
28
36
  variant: "tonal",
29
37
  role: "alert",
30
38
  "aria-live": "polite"
31
39
  }, {
32
- default: o(() => [
33
- c("div", G, u(a(g)("form.includes_error")) + ": ", 1),
34
- t.errors.length ? (e(), n(s(t.errors.length > 1 ? "ul" : "div"), {
35
- key: 0,
36
- class: "error-list"
37
- }, {
38
- default: o(() => [
39
- (e(!0), d(p, null, _(t.errors, (r) => (e(), n(s(t.errors.length > 1 ? "li" : "div"), {
40
- key: r.inputId,
41
- class: "error-item"
42
- }, {
43
- default: o(() => [
44
- c("div", L, u(r.label), 1),
45
- c("div", M, [
46
- (e(), n(s(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
47
- default: o(() => [
48
- (e(!0), d(p, null, _(r.errors, (v) => (e(), n(s(r.errors.length > 1 ? "li" : "span"), { key: v }, {
49
- default: o(() => [
50
- k(u(v), 1)
51
- ]),
52
- _: 2
53
- }, 1024))), 128))
54
- ]),
55
- _: 2
56
- }, 1024))
57
- ]),
58
- c("a", {
59
- href: `#${r.inputId}`,
60
- class: "error-link"
61
- }, [
62
- (e(), n(s(a(m) ? "v-icon" : "i"), {
63
- icon: a(N),
64
- "aria-hidden": "true"
65
- }, {
66
- default: o(() => [...l[0] || (l[0] = [
67
- c("i", null, "🔗", -1)
68
- ])]),
69
- _: 1
70
- }, 8, ["icon"])),
71
- k(" " + u(a(g)("form.fix_input")), 1)
72
- ], 8, O)
73
- ]),
74
- _: 2
75
- }, 1024))), 128))
76
- ]),
77
- _: 1
78
- })) : (e(), d("span", P, u(f.value[0]), 1))
40
+ default: u(() => [
41
+ n("div", j, [
42
+ d(c) ? h("", !0) : (e(), o("svg", D, [...t[0] || (t[0] = [
43
+ n("path", {
44
+ d: "M16 2H8L2 8V16L8 22H16L22 16V8L16 2Z",
45
+ stroke: "currentColor",
46
+ "stroke-width": "2",
47
+ "stroke-linecap": "round",
48
+ "stroke-linejoin": "round"
49
+ }, null, -1),
50
+ n("path", {
51
+ d: "M12 8V12",
52
+ stroke: "currentColor",
53
+ "stroke-width": "2",
54
+ "stroke-linecap": "round",
55
+ "stroke-linejoin": "round"
56
+ }, null, -1),
57
+ n("path", {
58
+ d: "M12 16.0195V16",
59
+ stroke: "currentColor",
60
+ "stroke-width": "2",
61
+ "stroke-linecap": "round",
62
+ "stroke-linejoin": "round"
63
+ }, null, -1)
64
+ ])])),
65
+ n("div", null, [
66
+ n("div", N, a(d(C)("form.includes_error")) + ": ", 1),
67
+ l.errors.length ? (e(), o("ul", z, [
68
+ (e(!0), o(v, null, w(l.errors, (r) => (e(), o("li", {
69
+ key: r.inputId,
70
+ class: "error-item"
71
+ }, [
72
+ n("div", null, [
73
+ n("a", {
74
+ href: `#${r.inputId}`,
75
+ class: "error-link"
76
+ }, a(r.label), 9, G),
77
+ t[1] || (t[1] = y(" " + a(" ") + " ", -1)),
78
+ l.hideErrorDetails ? h("", !0) : (e(), o("div", {
79
+ key: 0,
80
+ class: g(["error-message", r.errors.length < 2 && "single-error"])
81
+ }, [
82
+ (e(), i(p(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
83
+ default: u(() => [
84
+ (e(!0), o(v, null, w(r.errors, (f) => (e(), i(p(r.errors.length > 1 ? "li" : "span"), { key: f }, {
85
+ default: u(() => [
86
+ y(a(f), 1)
87
+ ]),
88
+ _: 2
89
+ }, 1024))), 128))
90
+ ]),
91
+ _: 2
92
+ }, 1024))
93
+ ], 2))
94
+ ])
95
+ ]))), 128))
96
+ ])) : (e(), o("span", H, a(m.value[0]), 1))
97
+ ])
98
+ ])
79
99
  ]),
80
100
  _: 1
81
101
  }, 8, ["class"]))
82
102
  ], !0)
83
- ])) : B("", !0)
103
+ ])) : h("", !0)
84
104
  ]),
85
105
  _: 3
86
106
  }));
87
107
  }
88
108
  });
89
109
  export {
90
- A as default
110
+ T as default
91
111
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@effect-app/vue-components",
3
- "version": "2.7.9",
3
+ "version": "2.7.10",
4
4
  "peerDependencies": {
5
5
  "@mdi/js": "^7.4.47",
6
6
  "effect": "^3.18.0",
@@ -14,57 +14,82 @@
14
14
  aria-live="polite"
15
15
  class="mb-4"
16
16
  >
17
- <div class="text-h6 mb-3">
18
- {{ trans("form.includes_error") }}:
19
- </div>
20
- <component
21
- :is="errors.length > 1 ? 'ul' : 'div'"
22
- v-if="errors.length"
23
- class="error-list"
24
- >
25
- <component
26
- :is="errors.length > 1 ? 'li' : 'div'"
27
- v-for="error in errors"
28
- :key="error.inputId"
29
- class="error-item"
17
+ <div class="container">
18
+ <svg
19
+ v-if="!vuetified"
20
+ viewBox="0 0 24 24"
21
+ fill="none"
22
+ xmlns="http://www.w3.org/2000/svg"
30
23
  >
31
- <div class="font-weight-medium">
32
- {{ error.label }}
33
- </div>
34
- <div class="error-message">
35
- <component
36
- :is="error.errors.length > 1 ? 'ul' : 'div'"
37
- class="error-list"
38
- >
39
- <component
40
- :is="error.errors.length > 1
41
- ? 'li'
42
- : 'span'"
43
- v-for="e in error.errors"
44
- :key="e"
45
- >
46
- {{ e }}
47
- </component>
48
- </component>
24
+ <path
25
+ d="M16 2H8L2 8V16L8 22H16L22 16V8L16 2Z"
26
+ stroke="currentColor"
27
+ stroke-width="2"
28
+ stroke-linecap="round"
29
+ stroke-linejoin="round"
30
+ />
31
+ <path
32
+ d="M12 8V12"
33
+ stroke="currentColor"
34
+ stroke-width="2"
35
+ stroke-linecap="round"
36
+ stroke-linejoin="round"
37
+ />
38
+ <path
39
+ d="M12 16.0195V16"
40
+ stroke="currentColor"
41
+ stroke-width="2"
42
+ stroke-linecap="round"
43
+ stroke-linejoin="round"
44
+ />
45
+ </svg>
46
+ <div>
47
+ <div class="text-h6">
48
+ {{ trans("form.includes_error") }}:
49
49
  </div>
50
- <a
51
- :href="`#${error.inputId}`"
52
- class="error-link"
50
+ <ul
51
+ v-if="errors.length"
52
+ class="error-list"
53
53
  >
54
- <component
55
- :is="vuetified ? 'v-icon' : 'i'"
56
- :icon="mdiLink"
57
- aria-hidden="true"
54
+ <li
55
+ v-for="error in errors"
56
+ :key="error.inputId"
57
+ class="error-item"
58
58
  >
59
- <i>&#128279;</i>
60
- </component>
61
- {{ trans("form.fix_input") }}
62
- </a>
63
- </component>
64
- </component>
65
- <span v-else>
66
- {{ showedGeneralErrors[0] }}
67
- </span>
59
+ <div>
60
+ <a
61
+ :href="`#${error.inputId}`"
62
+ class="error-link"
63
+ >{{ error.label }}</a>
64
+ {{ " " }}
65
+ <div
66
+ v-if="!hideErrorDetails"
67
+ class="error-message"
68
+ :class="error.errors.length < 2 && 'single-error'"
69
+ >
70
+ <component
71
+ :is="error.errors.length > 1 ? 'ul' : 'div'"
72
+ class="error-list"
73
+ >
74
+ <component
75
+ :is="error.errors.length > 1
76
+ ? 'li'
77
+ : 'span'"
78
+ v-for="e in error.errors"
79
+ :key="e"
80
+ >
81
+ {{ e }}
82
+ </component>
83
+ </component>
84
+ </div>
85
+ </div>
86
+ </li>
87
+ </ul>
88
+ <span v-else>
89
+ {{ showedGeneralErrors[0] }}
90
+ </span>
91
+ </div>
92
+ </div>
68
93
  </component>
69
94
  </slot>
70
95
  </div>
@@ -72,7 +97,6 @@
72
97
  </template>
73
98
 
74
99
  <script setup lang="ts">
75
- import { mdiLink } from "@mdi/js"
76
100
  import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
77
101
  import { computed, getCurrentInstance } from "vue"
78
102
  import { useIntl } from "../../utils"
@@ -85,6 +109,7 @@ const props = defineProps<
85
109
  {
86
110
  generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[]
87
111
  errors: OmegaError[]
112
+ hideErrorDetails?: boolean
88
113
  }
89
114
  >()
90
115
 
@@ -145,52 +170,54 @@ const showedGeneralErrors = computed(() => {
145
170
 
146
171
  .error-list {
147
172
  list-style-position: inside;
148
- }
149
173
 
150
- div.error-list {
151
- container-type: inline-size;
152
- display: grid;
153
- grid-template-columns: auto 1fr auto;
154
- gap: 1.5em;
155
- align-items: start;
174
+ ::marker {
175
+ margin: 0;
176
+ padding: 0;
177
+ }
156
178
  }
157
179
 
158
- @container (max-width: 27.125rem) {
159
- div.error-list {
160
- grid-template-columns: auto 1fr;
161
- }
180
+ .error-alert-content {
181
+ background-color: var(--error-background, #fff5f5);
182
+ color: var(--error-color, #c92a2a);
183
+ padding: 1em;
184
+ }
162
185
 
163
- .error-link {
164
- grid-column: 1 / -1;
165
- justify-self: end;
166
- }
186
+ .error-link {
187
+ font-weight: bold;
188
+ color: var(--error-color, #c92a2a);
167
189
  }
168
190
 
169
- @container (max-width: 17.75rem) {
170
- div.error-list {
171
- grid-template-columns: 1fr;
172
- }
191
+ .text-h6 {
192
+ font-weight: bold;
193
+ }
173
194
 
174
- .error-message {
175
- grid-column: 1 / -1;
176
- }
195
+ .error-message {
196
+ font-style: italic;
177
197
  }
178
198
 
179
199
  .error-item {
180
- display: contents;
181
- }
200
+ margin-bottom: 0.5em;
201
+ overflow: hidden;
182
202
 
183
- a {
184
- min-width: min-content;
203
+ > div {
204
+ float: right;
205
+ width: 100%;
206
+ max-width: calc(100% - 1.5em);
207
+ }
185
208
  }
186
209
 
187
- .error-link {
188
- align-items: center;
189
- color: inherit;
190
- display: inline-flex;
191
- flex-wrap: wrap;
192
- gap: 0.25em;
193
- padding-bottom: 1em;
194
- text-decoration: none;
210
+ .container {
211
+ display: flex;
212
+ gap: 1.5em;
213
+ align-items: flex-start;
214
+
215
+ svg {
216
+ width: 3em;
217
+ margin-top: 0.5em;
218
+ }
219
+ .single-error {
220
+ display: inline-block;
221
+ }
195
222
  }
196
223
  </style>