@well-insight/ui 0.1.6 → 0.1.8

package/dist/fluid/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Fluid/styles.css'

package/dist/form/index.js

@@ -0,0 +1,270 @@
+import { n as e } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, normalizeStyle as l, onBeforeUnmount as u, openBlock as d, provide as f, reactive as p, renderSlot as m, toDisplayString as h, useId as g, watch as _, withModifiers as v } from "vue";
+//#region src/components/Form/context.ts
+var y = Symbol("wiForm"), b = Symbol("wiFormErrors"), x = /* @__PURE__ */ o({
+	__name: "Form",
+	props: {
+		model: {},
+		rules: {},
+		labelPosition: { default: void 0 },
+		labelPlacement: { default: void 0 },
+		labelAlign: { default: "left" },
+		labelWidth: {},
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		requireMark: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		validateOn: { default: () => ["submit"] }
+	},
+	emits: ["submit", "validate"],
+	setup(e, { expose: n, emit: i }) {
+		let a = e, o = i, s = /* @__PURE__ */ new Map(), l = p({}), u = t(() => {
+			let e = a.validateOn;
+			return Array.isArray(e) ? e : [e];
+		}), h = t(() => a.labelPosition ?? a.labelPlacement ?? "top");
+		function g(e, t) {
+			t ? l[e] = t : delete l[e];
+		}
+		async function _(e, t = "all") {
+			let n = s.get(e);
+			if (!n) return !0;
+			let r = await n.validate(t), i = typeof r == "string" && r.trim() ? r.trim() : void 0;
+			return g(e, i), !i;
+		}
+		async function x(e) {
+			if (e) {
+				let t = await _(e, "all"), n = { ...l };
+				return o("validate", {
+					valid: t,
+					errors: n
+				}), {
+					valid: t,
+					errors: n
+				};
+			}
+			let t = [...s.keys()], n = (await Promise.all(t.map((e) => _(e, "all")))).every(Boolean), r = { ...l };
+			return o("validate", {
+				valid: n,
+				errors: r
+			}), {
+				valid: n,
+				errors: r
+			};
+		}
+		function S(e) {
+			e ? g(e, void 0) : Object.keys(l).forEach((e) => g(e, void 0));
+		}
+		function C(e) {
+			s.set(e.name, e);
+		}
+		function w(e) {
+			s.delete(e), g(e, void 0);
+		}
+		function T(e) {
+			_(e, "blur");
+		}
+		function E(e) {
+			_(e, "change");
+		}
+		function D(e) {
+			_(e, "input");
+		}
+		let O = t(() => ({
+			model: a.model,
+			rules: a.rules,
+			labelPosition: h.value,
+			labelAlign: a.labelAlign,
+			labelWidth: a.labelWidth,
+			requireMark: a.requireMark,
+			disabled: a.disabled,
+			validateOn: u.value,
+			registerField: C,
+			unregisterField: w,
+			notifyBlur: T,
+			notifyChange: E,
+			notifyInput: D
+		}));
+		f(y, O), f(b, l);
+		async function k() {
+			if (u.value.includes("submit")) {
+				let { valid: e } = await x();
+				o("submit", { valid: e });
+				return;
+			}
+			o("submit", { valid: !0 });
+		}
+		return n({
+			validate: x,
+			clearValidate: S,
+			errors: l
+		}), (t, n) => (d(), r("form", {
+			class: c(["wi-form", [
+				`wi-form--label-${h.value}`,
+				`wi-form--align-${e.labelAlign}`,
+				{
+					"wi-form--disabled": e.disabled,
+					"wi-form--inline": e.inline
+				}
+			]]),
+			onSubmit: v(k, ["prevent"])
+		}, [m(t.$slots, "default")], 34));
+	}
+});
+//#endregion
+//#region src/components/Form/rules.ts
+function S(e) {
+	return e ? Array.isArray(e) ? e : [e] : [];
+}
+function C(e) {
+	return Array.isArray(e) ? e : [e];
+}
+function w(e, t, n) {
+	return t === "all" || t === "submit" || (e.trigger == null ? n : C(e.trigger)).includes(t);
+}
+function T(e) {
+	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : Array.isArray(e) ? e.length === 0 : !1;
+}
+function E(e) {
+	if (typeof e == "string" || Array.isArray(e)) return e.length;
+	if (typeof e == "number" && Number.isFinite(e)) return e;
+}
+async function D(e, t, n) {
+	if (e.required && T(t)) return e.message?.trim() || n;
+	let r = E(t);
+	if (e.min != null && r != null && r < e.min || e.max != null && r != null && r > e.max || e.pattern && typeof t == "string" && t !== "" && !e.pattern.test(t)) return e.message?.trim() || n;
+	if (e.validator) {
+		let r = await e.validator(t);
+		if (typeof r == "string" && r.trim()) return r.trim();
+		if (r === !1) return e.message?.trim() || n;
+	}
+}
+function O(e) {
+	if (e != null && e !== "") return typeof e == "number" ? `${e}px` : e;
+}
+//#endregion
+//#region src/components/Form/FormItem.vue?vue&type=script&setup=true&lang.ts
+var k = ["for"], A = ["aria-label"], j = { class: "wi-form-item__body" }, M = { class: "wi-form-item__control" }, N = ["id"], P = ["id"], F = /* @__PURE__ */ o({
+	__name: "FormItem",
+	props: {
+		label: {},
+		for: {},
+		name: {},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		error: {},
+		help: {},
+		validate: {},
+		rules: {},
+		labelPosition: {},
+		labelAlign: {},
+		labelWidth: {}
+	},
+	setup(o) {
+		let f = o, p = s(y, null), v = s(b, null), x = e(), C = g(), T = t(() => f.labelPosition ?? p?.value.labelPosition ?? "top"), E = t(() => f.labelAlign ?? p?.value.labelAlign ?? "left"), F = t(() => O(f.labelWidth ?? p?.value.labelWidth)), I = t(() => f.name ?? f.for), L = t(() => {
+			let e = I.value;
+			return [...e ? S(p?.value.rules?.[e]) : [], ...S(f.rules)];
+		}), R = t(() => !!((p?.value.requireMark ?? !0) && (f.required || L.value.some((e) => e.required)))), z = t(() => {
+			let e = I.value;
+			if (!(!e || !v)) return v[e];
+		}), B = t(() => f.error ?? z.value), V = t(() => f.invalid || !!B.value), H = t(() => f.for ?? `wi-form-item-${C}`), U = t(() => `${H.value}-message`), W = t(() => x.value.required), G = t(() => {
+			let e = I.value;
+			if (e) return p?.value.model?.[e];
+		}), K = t(() => [
+			"wi-form-item",
+			`wi-form-item--label-${T.value}`,
+			`wi-form-item--align-${E.value}`,
+			{
+				"wi-form-item--invalid": V.value,
+				"wi-form-item--required": R.value
+			}
+		]), q = t(() => {
+			let e = { textAlign: E.value };
+			return T.value === "left" && F.value && (e.width = F.value), e;
+		});
+		async function J(e = "all") {
+			let t = G.value, n = p?.value.validateOn ?? ["submit"];
+			for (let r of L.value) {
+				if (!w(r, e, n)) continue;
+				let i = await D(r, t, x.value.required);
+				if (i) return i;
+			}
+			if (f.validate && w({}, e, n)) {
+				let t = await f.validate(e);
+				if (typeof t == "string" && t.trim()) return t.trim();
+				if (t === !1) return x.value.required;
+			}
+		}
+		_(() => [
+			I.value,
+			L.value,
+			f.validate
+		], ([e], t) => {
+			let n = t?.[0];
+			n && n !== e && p?.value.unregisterField(n), !(!p?.value || !e) && p.value.registerField({
+				name: e,
+				validate: (e) => J(e ?? "all")
+			});
+		}, { immediate: !0 }), u(() => {
+			let e = I.value;
+			e && p?.value.unregisterField(e);
+		});
+		function Y() {
+			let e = I.value;
+			e && p?.value.notifyBlur(e);
+		}
+		function X() {
+			let e = I.value;
+			e && p?.value.notifyChange(e);
+		}
+		function Z() {
+			let e = I.value;
+			e && p?.value.notifyInput(e);
+		}
+		return (e, t) => (d(), r("div", {
+			class: c(K.value),
+			onFocusout: Y,
+			onChange: X,
+			onInput: Z
+		}, [o.label ? (d(), r("label", {
+			key: 0,
+			class: "wi-form-item__label",
+			for: H.value,
+			style: l(q.value)
+		}, [R.value ? (d(), r("span", {
+			key: 0,
+			class: "wi-form-item__required",
+			"aria-label": W.value
+		}, "*", 8, A)) : n("", !0), a(" " + h(o.label), 1)], 12, k)) : n("", !0), i("div", j, [i("div", M, [m(e.$slots, "default", {
+			id: H.value,
+			invalid: V.value,
+			describedBy: B.value || o.help ? U.value : void 0,
+			error: B.value
+		})]), B.value ? (d(), r("p", {
+			key: 0,
+			id: U.value,
+			class: "wi-form-item__error",
+			role: "alert"
+		}, h(B.value), 9, N)) : o.help ? (d(), r("p", {
+			key: 1,
+			id: U.value,
+			class: "wi-form-item__help"
+		}, h(o.help), 9, P)) : n("", !0)])], 34));
+	}
+});
+//#endregion
+export { b as WI_FORM_ERRORS_KEY, y as WI_FORM_KEY, x as WiForm, F as WiFormItem };