@well-insight/ui 0.1.10 → 0.1.12

package/dist/dialog/index.js

@@ -1,25 +1,25 @@
-import { t as e } from "../Icon-B6gOD07E.js";
-import { t } from "../Button-B6-YxpOQ.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { t } from "../Button-tnrMSwNg.js";
 import { n } from "../overlay-oR-5MDuE.js";
 import { t as r } from "../useModalOverlay-Beo3CEAt.js";
 import { t as i } from "../asyncGuard-CPGT_TKu.js";
 import { t as a } from "../lastPointer-CRxcUqdd.js";
-import { c as o } from "../config-DWwce9jA.js";
-import { n as s } from "../locale-CYkJyRd1.js";
+import { c as o } from "../config-CTLkobga.js";
+import { n as s } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, toRef as C, unref as w, useSlots as ee, watch as te, withCtx as ne, withModifiers as T } from "vue";
+import { Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, toRef as C, unref as w, useSlots as T, watch as ee, withCtx as te, withModifiers as ne } from "vue";
 //#region src/components/Dialog/Dialog.vue?vue&type=script&setup=true&lang.ts
-var E = ["aria-modal", "aria-label"], re = {
+var E = ["aria-modal", "aria-label"], D = {
 	key: 0,
 	class: "wi-dialog__header"
-}, D = { class: "wi-dialog__heading" }, O = {
+}, O = { class: "wi-dialog__heading" }, k = {
 	key: 0,
 	class: "wi-dialog__type-icon",
 	"aria-hidden": "true"
-}, k = { key: 0 }, A = {
+}, A = { key: 0 }, j = {
 	key: 0,
 	class: "wi-dialog__actions"
-}, j = ["aria-label", "disabled"], M = ["aria-label", "disabled"], N = { class: "wi-dialog__body" }, P = /* @__PURE__ */ g({
+}, M = ["aria-label", "disabled"], N = ["aria-label", "disabled"], P = { class: "wi-dialog__body" }, F = /* @__PURE__ */ g({
 	__name: "Dialog",
 	props: {
 		modelValue: {
@@ -73,138 +73,144 @@ var E = ["aria-modal", "aria-label"], re = {
 		"maximize",
 		"unmaximize"
 	],
-	setup(g, { emit: P }) {
-		let F = g, I = P, L = ee(), R = o(), z = s(), B = b(null), V = b(!1), H = b(a()), U = b(null), W = u(() => F.header ?? F.title), G = u(() => n(F, R.value.appendTo)), K = u(() => {
-			let e = F.type;
+	setup(g, { emit: F }) {
+		let I = g, L = F, R = T(), z = o(), B = s(), V = b(null), H = b(!1), U = b(a()), W = b(null), G = u(() => I.header ?? I.title), K = u(() => n(I, z.value.appendTo)), q = u(() => {
+			let e = I.type;
 			return e === "warning" || e === "warn" ? "warn" : e;
-		}), q = u(() => {
-			switch (K.value) {
+		}), J = u(() => {
+			switch (q.value) {
 				case "success": return "check-circle";
 				case "warn": return "warning";
 				case "error": return "x-circle";
 				case "info": return "info";
 				default: return;
 			}
-		}), J = u(() => !L.footer && !!(F.positiveText || F.negativeText)), Y = u(() => !!(L.footer || J.value)), X = u(() => U.value != null), Z = u(() => ({
-			zIndex: String(R.value.zIndex ?? 1e3),
-			"--wi-dialog-origin-x": `${H.value.x}px`,
-			"--wi-dialog-origin-y": `${H.value.y}px`
-		})), ie = u(() => F.dismissableMask === void 0 ? F.closeOnOutsideClick === void 0 || F.closeOnOutsideClick : F.dismissableMask);
+		}), Y = u(() => !R.footer && !!(I.positiveText || I.negativeText)), X = u(() => !!(R.footer || Y.value)), Z = u(() => W.value != null), re = u(() => ({
+			zIndex: String(z.value.zIndex ?? 1e3),
+			"--wi-dialog-origin-x": `${U.value.x}px`,
+			"--wi-dialog-origin-y": `${U.value.y}px`
+		})), ie = u(() => I.dismissableMask === void 0 ? I.closeOnOutsideClick === void 0 || I.closeOnOutsideClick : I.dismissableMask);
 		function Q() {
-			V.value = !1, U.value = null, I("update:modelValue", !1), I("close");
+			H.value = !1, W.value = null, L("update:modelValue", !1), L("close");
 		}
 		async function $() {
-			if (!U.value) {
-				if (!F.beforeClose) {
+			if (!W.value) {
+				if (!I.beforeClose) {
 					Q();
 					return;
 				}
-				U.value = "close";
+				W.value = "close";
 				try {
-					if (!await i(F.beforeClose)) return;
+					if (!await i(I.beforeClose)) return;
 					Q();
 				} finally {
-					U.value === "close" && (U.value = null);
+					W.value === "close" && (W.value = null);
 				}
 			}
 		}
 		async function ae(e) {
-			if (!U.value) {
-				U.value = "positive";
+			if (!W.value) {
+				W.value = "positive";
 				try {
-					if (!await i(F.onPositiveClick, e)) return;
+					if (!await i(I.onPositiveClick, e)) return;
 					Q();
 				} finally {
-					U.value === "positive" && (U.value = null);
+					W.value === "positive" && (W.value = null);
 				}
 			}
 		}
 		async function oe(e) {
-			if (!U.value) {
-				U.value = "negative";
+			if (!W.value) {
+				W.value = "negative";
 				try {
-					if (!await i(F.onNegativeClick, e)) return;
+					if (!await i(I.onNegativeClick, e)) return;
 					Q();
 				} finally {
-					U.value === "negative" && (U.value = null);
+					W.value === "negative" && (W.value = null);
 				}
 			}
 		}
 		function se() {
-			V.value = !V.value, V.value ? I("maximize") : I("unmaximize");
+			H.value = !H.value, H.value ? L("maximize") : L("unmaximize");
 		}
 		function ce() {
 			ie.value && $();
 		}
-		return te(() => F.modelValue, (e) => {
-			e && (H.value = a());
+		return ee(() => I.modelValue, (e) => {
+			e && (U.value = a());
 		}), r({
-			open: C(F, "modelValue"),
-			container: B,
-			closeOnEsc: C(F, "closeOnEsc"),
-			blockScroll: () => F.blockScroll && F.modal,
+			open: C(I, "modelValue"),
+			container: V,
+			closeOnEsc: C(I, "closeOnEsc"),
+			blockScroll: () => I.blockScroll && I.modal,
 			onEscape: () => {
 				$();
 			},
-			onOpen: () => I("show"),
+			onOpen: () => L("show"),
 			onClose: () => {
-				V.value = !1, I("hide");
+				H.value = !1, L("hide");
 			}
 		}), (n, r) => (y(), d(c, {
-			to: G.value.to,
-			disabled: G.value.disabled
+			to: K.value.to,
+			disabled: K.value.disabled
 		}, [h(l, { name: "wi-dialog" }, {
-			default: ne(() => [g.modelValue ? (y(), p("div", {
+			default: te(() => [g.modelValue ? (y(), p("div", {
 				key: 0,
 				class: _(["wi-dialog-backdrop", [`wi-dialog-backdrop--${g.position}`, {
 					"wi-dialog-backdrop--modal": g.modal,
-					"wi-dialog-backdrop--maximized": V.value
+					"wi-dialog-backdrop--maximized": H.value
 				}]]),
-				style: v(Z.value)
+				style: v(re.value)
 			}, [m("div", {
 				class: "wi-dialog-zoom",
-				onClick: T(ce, ["self"])
+				onClick: ne(ce, ["self"])
 			}, [m("section", {
 				ref_key: "dialogElement",
-				ref: B,
+				ref: V,
 				class: _(["wi-dialog", {
-					"wi-dialog--maximized": V.value,
-					[`wi-dialog--${K.value}`]: K.value
+					"wi-dialog--maximized": H.value,
+					[`wi-dialog--${q.value}`]: q.value
 				}]),
-				style: v(g.width && !V.value ? { width: g.width } : void 0),
+				style: v(g.width && !H.value ? { width: g.width } : void 0),
 				role: "dialog",
 				"aria-modal": g.modal || void 0,
-				"aria-label": W.value,
+				"aria-label": G.value,
 				tabindex: "-1"
 			}, [
-				n.$slots.header || W.value || q.value || g.closable || g.maximizable ? (y(), p("header", re, [m("div", D, [q.value ? (y(), p("span", O, [h(e, {
-					name: q.value,
+				n.$slots.header || G.value || J.value || g.closable || g.maximizable ? (y(), p("header", D, [m("div", O, [J.value ? (y(), p("span", k, [h(e, {
+					name: J.value,
 					size: "sm"
-				}, null, 8, ["name"])])) : f("", !0), x(n.$slots, "header", {}, () => [W.value ? (y(), p("h2", k, S(W.value), 1)) : f("", !0)])]), g.maximizable || g.closable ? (y(), p("div", A, [g.maximizable ? (y(), p("button", {
+				}, null, 8, ["name"])])) : f("", !0), x(n.$slots, "header", {}, () => [G.value ? (y(), p("h2", A, S(G.value), 1)) : f("", !0)])]), g.maximizable || g.closable ? (y(), p("div", j, [g.maximizable ? (y(), p("button", {
 					key: 0,
 					type: "button",
 					class: "wi-dialog__action",
-					"aria-label": V.value ? w(z).restore : w(z).maximize,
-					disabled: X.value,
+					"aria-label": H.value ? w(B).restore : w(B).maximize,
+					disabled: Z.value,
 					onClick: se
-				}, S(V.value ? "❐" : "▢"), 9, j)) : f("", !0), g.closable ? (y(), p("button", {
+				}, [h(e, {
+					name: H.value ? "restore" : "maximize",
+					size: "sm"
+				}, null, 8, ["name"])], 8, M)) : f("", !0), g.closable ? (y(), p("button", {
 					key: 1,
 					type: "button",
 					class: "wi-dialog__action",
-					"aria-label": w(z).close,
-					disabled: X.value,
+					"aria-label": w(B).close,
+					disabled: Z.value,
 					onClick: $
-				}, " × ", 8, M)) : f("", !0)])) : f("", !0)])) : f("", !0),
-				m("div", N, [x(n.$slots, "default")]),
-				Y.value ? (y(), p("footer", {
+				}, [h(e, {
+					name: "close",
+					size: "sm"
+				})], 8, N)) : f("", !0)])) : f("", !0)])) : f("", !0),
+				m("div", P, [x(n.$slots, "default")]),
+				X.value ? (y(), p("footer", {
 					key: 1,
-					class: _(["wi-dialog__footer", { "wi-dialog__footer--preset": J.value }])
+					class: _(["wi-dialog__footer", { "wi-dialog__footer--preset": Y.value }])
 				}, [x(n.$slots, "footer", {}, () => [g.negativeText ? (y(), d(t, {
 					key: 0,
 					label: g.negativeText,
 					severity: "secondary",
-					disabled: X.value,
-					loading: U.value === "negative",
+					disabled: Z.value,
+					loading: W.value === "negative",
 					onClick: oe
 				}, null, 8, [
 					"label",
@@ -214,8 +220,8 @@ var E = ["aria-modal", "aria-label"], re = {
 					key: 1,
 					label: g.positiveText,
 					severity: g.positiveSeverity,
-					disabled: X.value && U.value !== "positive",
-					loading: U.value === "positive",
+					disabled: Z.value && W.value !== "positive",
+					loading: W.value === "positive",
 					onClick: ae
 				}, null, 8, [
 					"label",
@@ -229,4 +235,4 @@ var E = ["aria-modal", "aria-label"], re = {
 	}
 });
 //#endregion
-export { P as WiDialog };
+export { F as WiDialog };

package/dist/dialog/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }

package/dist/divider/index.js

@@ -11,14 +11,13 @@ var d = ["role", "aria-orientation"], f = {
 	__name: "Divider",
 	props: {
 		layout: {},
-		orientation: {},
 		type: { default: "solid" },
 		align: { default: "center" },
 		titlePlacement: {},
 		label: {}
 	},
 	setup(a) {
-		let m = a, h = u(), g = e(() => m.layout ?? m.orientation ?? "horizontal"), _ = e(() => m.titlePlacement ?? m.align), v = e(() => !!(m.label || h.default)), y = e(() => [
+		let m = a, h = u(), g = e(() => m.layout ?? "horizontal"), _ = e(() => m.titlePlacement ?? m.align), v = e(() => !!(m.label || h.default)), y = e(() => [
 			"wi-divider",
 			`wi-divider--${g.value}`,
 			`wi-divider--${m.type}`,

package/dist/divider/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }

package/dist/dock/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }

package/dist/drawer/index.js

@@ -1,14 +1,15 @@
-import { n as e } from "../overlay-oR-5MDuE.js";
-import { t } from "../useModalOverlay-Beo3CEAt.js";
-import { c as n } from "../config-DWwce9jA.js";
-import { n as r } from "../locale-CYkJyRd1.js";
+import { t as e } from "../Icon-DHGs8l-M.js";
+import { n as t } from "../overlay-oR-5MDuE.js";
+import { t as n } from "../useModalOverlay-Beo3CEAt.js";
+import { c as r } from "../config-CTLkobga.js";
+import { n as i } from "../locale-DxAvgqgB.js";
 import "./style.js";
-import { Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, withCtx as x, withModifiers as S } from "vue";
+import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, toRef as b, unref as x, withCtx as S, withModifiers as C } from "vue";
 //#region src/components/Drawer/Drawer.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-modal", "aria-label"], w = {
+var w = ["aria-modal", "aria-label"], T = {
 	key: 0,
 	class: "wi-drawer__header"
-}, T = { key: 0 }, E = ["aria-label"], D = { class: "wi-drawer__body" }, O = /* @__PURE__ */ f({
+}, E = { key: 0 }, D = ["aria-label"], O = { class: "wi-drawer__body" }, k = /* @__PURE__ */ p({
 	__name: "Drawer",
 	props: {
 		modelValue: {
@@ -47,66 +48,69 @@ var C = ["aria-modal", "aria-label"], w = {
 		"hide",
 		"after-leave"
 	],
-	setup(f, { emit: O }) {
-		let k = f, A = O, j = n(), M = r(), N = g(null), P = o(() => e(k, j.value.appendTo));
-		function F(e) {
+	setup(p, { emit: k }) {
+		let A = p, j = k, M = r(), N = i(), P = _(null), F = s(() => t(A, M.value.appendTo));
+		function I(e) {
 			if (e != null) return typeof e == "number" ? `${e}px` : e;
 		}
-		let I = o(() => {
+		let L = s(() => {
 			let e = {};
-			if (k.position === "left" || k.position === "right") {
-				let t = F(k.width);
+			if (A.position === "left" || A.position === "right") {
+				let t = I(A.width);
 				t && (e.width = t);
 			}
-			if (k.position === "top" || k.position === "bottom") {
-				let t = F(k.height);
+			if (A.position === "top" || A.position === "bottom") {
+				let t = I(A.height);
 				t && (e.height = t, e.maxHeight = t);
 			}
 			return e;
 		});
-		function L() {
-			A("update:modelValue", !1);
-		}
 		function R() {
-			k.dismissable && L();
+			j("update:modelValue", !1);
+		}
+		function z() {
+			A.dismissable && R();
 		}
-		return t({
-			open: y(k, "modelValue"),
-			container: N,
-			blockScroll: () => k.blockScroll && k.modal,
-			onEscape: L,
-			onOpen: () => A("show"),
-			onClose: () => A("hide")
-		}), (e, t) => (h(), s(i, {
-			to: P.value.to,
-			disabled: P.value.disabled
-		}, [d(a, {
+		return n({
+			open: b(A, "modelValue"),
+			container: P,
+			blockScroll: () => A.blockScroll && A.modal,
+			onEscape: R,
+			onOpen: () => j("show"),
+			onClose: () => j("hide")
+		}), (t, n) => (g(), c(a, {
+			to: F.value.to,
+			disabled: F.value.disabled
+		}, [f(o, {
 			name: "wi-drawer",
-			onAfterLeave: t[0] ||= (e) => A("after-leave")
+			onAfterLeave: n[0] ||= (e) => j("after-leave")
 		}, {
-			default: x(() => [f.modelValue ? (h(), l("div", {
+			default: S(() => [p.modelValue ? (g(), u("div", {
 				key: 0,
-				class: p(["wi-drawer-backdrop", { "wi-drawer-backdrop--modal": f.modal }]),
-				onClick: S(R, ["self"])
-			}, [u("aside", {
+				class: m(["wi-drawer-backdrop", { "wi-drawer-backdrop--modal": p.modal }]),
+				onClick: C(z, ["self"])
+			}, [d("aside", {
 				ref_key: "drawerElement",
-				ref: N,
-				class: p(["wi-drawer", `wi-drawer--${f.position}`]),
-				style: m(I.value),
+				ref: P,
+				class: m(["wi-drawer", `wi-drawer--${p.position}`]),
+				style: h(L.value),
 				role: "dialog",
-				"aria-modal": f.modal || void 0,
-				"aria-label": f.header,
+				"aria-modal": p.modal || void 0,
+				"aria-label": p.header,
 				tabindex: "-1"
-			}, [e.$slots.header || f.header || f.showCloseIcon ? (h(), l("header", w, [_(e.$slots, "header", {}, () => [f.header ? (h(), l("h2", T, v(f.header), 1)) : c("", !0)]), f.showCloseIcon ? (h(), l("button", {
+			}, [t.$slots.header || p.header || p.showCloseIcon ? (g(), u("header", T, [v(t.$slots, "header", {}, () => [p.header ? (g(), u("h2", E, y(p.header), 1)) : l("", !0)]), p.showCloseIcon ? (g(), u("button", {
 				key: 0,
 				type: "button",
 				class: "wi-drawer__close",
-				"aria-label": b(M).close,
-				onClick: L
-			}, " × ", 8, E)) : c("", !0)])) : c("", !0), u("div", D, [_(e.$slots, "default")])], 14, C)], 2)) : c("", !0)]),
+				"aria-label": x(N).close,
+				onClick: R
+			}, [f(e, {
+				name: "close",
+				size: "sm"
+			})], 8, D)) : l("", !0)])) : l("", !0), d("div", O, [v(t.$slots, "default")])], 14, w)], 2)) : l("", !0)]),
 			_: 3
 		})], 8, ["to", "disabled"]));
 	}
 });
 //#endregion
-export { O as WiDrawer };
+export { k as WiDrawer };

package/dist/drawer/style.css

@@ -480,8 +480,8 @@
     font-size: var(--wi-font-size-xs);
 }
 
-.wi-textarea-field__help--error,
-.wi-select-field__help--error {
+.wi-textarea-field__help--invalid,
+.wi-select-field__help--invalid {
     color: var(--wi-color-danger);
 }
 
@@ -500,9 +500,8 @@
 }
 
 .wi-textarea--invalid:focus-visible,
-.wi-textarea--error:focus-visible,
-.wi-select--error.wi-select--open,
-.wi-select--error:focus-visible {
+.wi-select--invalid.wi-select--open,
+.wi-select--invalid:focus-visible {
     border-color: var(--wi-color-danger);
     box-shadow: var(--wi-focus-shadow-danger);
 }
@@ -750,6 +749,45 @@
     line-height: 1;
 }
 
+.wi-icon {
+    display: inline-flex;
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.wi-icon--sm,
+.wi-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.wi-icon--md,
+.wi-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.wi-icon--lg,
+.wi-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.wi-icon--spin svg {
+    animation: wi-icon-spin 0.8s linear infinite;
+}
+
+@keyframes wi-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 .wi-drawer-enter-active {
     transition: opacity var(--wi-motion-enter) var(--wi-motion-ease);
 }

package/dist/drawer/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/Drawer/styles.css'