@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system101.js

@@ -1,510 +1,57 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as ee, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as te, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, vShow as g, watch as _, withCtx as ne, withDirectives as re, withModifiers as ie } from "vue";
-//#region src/components/BImage/BImage.vue?vue&type=script&setup=true&lang.ts
-var ae = ["src", "alt"], oe = {
-	key: 1,
-	class: "b-image__placeholder",
-	"aria-hidden": "true"
-}, v = [
-	"src",
-	"alt",
-	"width",
-	"height",
-	"loading",
-	"crossorigin",
-	"decoding",
-	"referrerpolicy"
-], se = ["aria-label"], ce = ["aria-label"], le = ["aria-label"], ue = { class: "b-image-preview__body" }, y = ["src", "alt"], b = ["aria-pressed"], x = ["aria-pressed"], S = ["disabled"], C = {
-	class: "b-image-preview__scale",
-	"aria-live": "polite",
-	"aria-atomic": "true"
-}, de = ["disabled"], w = /* @__PURE__ */ c({
-	__name: "BImage",
-	props: {
-		src: { default: void 0 },
-		alt: { default: "" },
-		width: { default: void 0 },
-		height: { default: void 0 },
-		fallback: { default: void 0 },
-		placeholder: {
-			type: Boolean,
-			default: !1
-		},
-		placeholderSrc: { default: void 0 },
-		preview: {
-			type: Boolean,
-			default: !0
-		},
-		mask: {
-			type: Boolean,
-			default: !0
-		},
-		previewSrc: { default: void 0 },
-		previewVisible: {
-			type: Boolean,
-			default: void 0
-		},
-		scaleStep: { default: .5 },
-		minScale: { default: 1 },
-		maxScale: { default: 50 },
-		movable: {
-			type: Boolean,
-			default: !0
-		},
-		loading: { default: void 0 },
-		crossOrigin: { default: void 0 },
-		decoding: { default: void 0 },
-		referrerPolicy: { default: void 0 }
-	},
-	emits: [
-		"error",
-		"update:previewVisible",
-		"transform"
-	],
-	setup(c, { emit: w }) {
-		let T = c, E = w, D = p("loading"), O = p(!1);
-		function fe() {
-			D.value = "loaded";
-		}
-		function pe(e) {
-			T.fallback && !O.value ? (O.value = !0, D.value = "loading") : D.value = "error", E("error", e);
-		}
-		let me = n(() => O.value && T.fallback ? T.fallback : T.src);
-		_(() => T.src, () => {
-			D.value = "loading", O.value = !1;
-		});
-		let k = n(() => T.placeholderSrc && D.value === "loading"), A = n(() => {
-			let e = {};
-			return T.width != null && (e.width = typeof T.width == "number" ? `${T.width}px` : T.width), T.height != null && (e.height = typeof T.height == "number" ? `${T.height}px` : T.height), e;
-		}), j = n(() => T.preview && T.mask && D.value === "loaded"), M = p(!1), N = n(() => T.previewVisible !== void 0), P = n(() => N.value ? T.previewVisible : M.value);
-		function F() {
-			T.preview && (N.value ? E("update:previewVisible", !0) : M.value = !0, l(() => {
-				De();
-			}));
-		}
-		function I() {
-			N.value ? E("update:previewVisible", !1) : M.value = !1, l(() => {
-				Z.value?.focus();
-			});
-		}
-		let L = p(1), R = p(0), z = p(!1), B = p(!1), V = p(0), H = p(0);
-		function he() {
-			return {
-				scale: L.value,
-				rotate: R.value,
-				flipX: z.value,
-				flipY: B.value,
-				x: V.value,
-				y: H.value
-			};
-		}
-		function U(e) {
-			E("transform", {
-				transform: he(),
-				action: e
-			});
-		}
-		function W() {
-			L.value = 1, R.value = 0, z.value = !1, B.value = !1, V.value = 0, H.value = 0;
-		}
-		function ge() {
-			W(), U("reset");
-		}
-		function _e() {
-			let e = L.value + T.scaleStep;
-			L.value = Math.min(e, T.maxScale), U("zoomIn");
-		}
-		function ve() {
-			let e = L.value - T.scaleStep;
-			L.value = Math.max(e, T.minScale), U("zoomOut");
-		}
-		function ye() {
-			R.value -= 90, U("rotateLeft");
-		}
-		function be() {
-			R.value += 90, U("rotateRight");
-		}
-		function xe() {
-			z.value = !z.value, U("flipX");
-		}
-		function Se() {
-			B.value = !B.value, U("flipY");
-		}
-		let Ce = n(() => {
-			let e = [];
-			return e.push(`translate(${V.value}px, ${H.value}px)`), e.push(`scale(${z.value ? -1 : 1}, ${B.value ? -1 : 1})`), e.push(`scale(${L.value})`), e.push(`rotate(${R.value}deg)`), e.join(" ");
-		});
-		_(P, (e) => {
-			e && W();
-		});
-		let we = n(() => T.previewSrc || T.src), G = p(!1), K = p(0), q = p(0), J = p(0), Y = p(0);
-		function Te(e) {
-			if (!T.movable) return;
-			let t = e.target;
-			t.closest(".b-image-preview__toolbar") || t.closest(".b-image-preview__close") || (G.value = !0, K.value = e.clientX, q.value = e.clientY, J.value = V.value, Y.value = H.value, e.currentTarget?.setPointerCapture(e.pointerId), U("dragStart"));
-		}
-		function Ee(e) {
-			if (!G.value) return;
-			let t = e.clientX - K.value, n = e.clientY - q.value;
-			V.value = J.value + t, H.value = Y.value + n;
-		}
-		function X() {
-			G.value && (G.value = !1, U("dragEnd"));
-		}
-		let Z = p(null), Q = p(null);
-		function De() {
-			l(() => {
-				if (!Q.value) return;
-				let e = Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])");
-				e.length > 0 && e[0].focus();
-			});
-		}
-		function Oe(e) {
-			if (e.key === "Escape") {
-				e.stopPropagation(), I();
-				return;
-			}
-			if (e.key === "Tab" && Q.value) {
-				let t = Array.from(Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])"));
-				if (t.length === 0) return;
-				let n = t[0], r = t[t.length - 1];
-				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
-			}
-		}
-		function $(e) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
-		}
-		_(P, (e) => {
-			typeof document > "u" || (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
-		}), te(() => {
-			typeof document < "u" && (document.body.style.overflow = "");
-		});
-		function ke(e) {
-			if (e.preventDefault(), e.deltaY < 0) {
-				let e = L.value + T.scaleStep;
-				L.value = Math.min(e, T.maxScale);
-			} else {
-				let e = L.value - T.scaleStep;
-				L.value = Math.max(e, T.minScale);
-			}
-			U("wheel");
-		}
-		function Ae(e) {
-			let t = e.target;
-			if (t.tagName !== "BUTTON") return;
-			let n = t.closest(".b-image-preview__toolbar");
-			if (!n) return;
-			let r = Array.from(n.querySelectorAll("button:not(:disabled)")), i = r.indexOf(t), a = -1;
-			e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), a = (i + 1) % r.length) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), a = (i - 1 + r.length) % r.length) : e.key === "Home" ? (e.preventDefault(), a = 0) : e.key === "End" && (e.preventDefault(), a = r.length - 1), a >= 0 && r[a].focus();
-		}
-		return (n, l) => (f(), a("div", {
-			class: u(["b-image", {
-				"b-image--error": D.value === "error" && !c.fallback,
-				"b-image--preview": c.preview
-			}]),
-			style: d(A.value)
-		}, [
-			k.value ? (f(), a("img", {
-				key: 0,
-				class: "b-image__progressive-placeholder",
-				src: c.placeholderSrc,
-				alt: c.alt,
-				"aria-hidden": "true"
-			}, null, 8, ae)) : i("", !0),
-			(c.placeholder || n.$slots.placeholder) && D.value === "loading" && !c.placeholderSrc ? (f(), a("div", oe, [m(n.$slots, "placeholder", {}, () => [l[0] ||= o("div", { class: "b-image__placeholder-shimmer" }, null, -1)])])) : i("", !0),
-			re(o("img", {
-				class: "b-image__img",
-				src: me.value,
-				alt: c.alt,
-				width: typeof c.width == "number" ? c.width : void 0,
-				height: typeof c.height == "number" ? c.height : void 0,
-				loading: c.loading,
-				crossorigin: c.crossOrigin,
-				decoding: c.decoding,
-				referrerpolicy: c.referrerPolicy,
-				onLoad: fe,
-				onError: pe
-			}, null, 40, v), [[g, D.value !== "loading" || !c.placeholder && !n.$slots.placeholder && !c.placeholderSrc]]),
-			j.value ? (f(), a("div", {
-				key: 2,
-				ref_key: "triggerRef",
-				ref: Z,
-				class: "b-image__mask",
-				role: "button",
-				tabindex: "0",
-				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
-				onClick: F,
-				onKeydown: $
-			}, [m(n.$slots, "preview-mask", {}, () => [l[1] ||= o("span", {
-				class: "b-image__mask-text",
-				"aria-hidden": "true"
-			}, [o("svg", {
-				class: "b-image__mask-icon",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				"stroke-width": "2",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round",
-				"aria-hidden": "true",
-				focusable: "false"
-			}, [o("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), o("circle", {
-				cx: "12",
-				cy: "12",
-				r: "3"
-			})]), ee(" Preview ")], -1)])], 40, se)) : c.preview && !c.mask && D.value === "loaded" ? (f(), a("div", {
-				key: 3,
-				ref_key: "triggerRef",
-				ref: Z,
-				class: "b-image__click-target",
-				role: "button",
-				tabindex: "0",
-				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
-				onClick: F,
-				onKeydown: $
-			}, null, 40, ce)) : i("", !0),
-			(f(), r(e, { to: "body" }, [s(t, { name: "b-image-preview" }, {
-				default: ne(() => [P.value ? (f(), a("div", {
-					key: 0,
-					ref_key: "overlayRef",
-					ref: Q,
-					class: u(["b-image-preview", { "b-image-preview--dragging": G.value }]),
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": `Image preview${c.alt ? ": " + c.alt : ""}`,
-					onKeydown: Oe,
-					onWheel: ie(ke, ["prevent"]),
-					onPointerdown: Te,
-					onPointermove: Ee,
-					onPointerup: X,
-					onPointercancel: X
-				}, [
-					o("div", {
-						class: "b-image-preview__backdrop",
-						onClick: I
-					}),
-					o("button", {
-						class: "b-image-preview__close",
-						type: "button",
-						"aria-label": "Close preview",
-						onClick: I
-					}, [...l[2] ||= [o("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
-						"aria-hidden": "true",
-						focusable: "false"
-					}, [o("line", {
-						x1: "18",
-						y1: "6",
-						x2: "6",
-						y2: "18"
-					}), o("line", {
-						x1: "6",
-						y1: "6",
-						x2: "18",
-						y2: "18"
-					})], -1)]]),
-					o("div", ue, [o("img", {
-						class: "b-image-preview__img",
-						src: we.value,
-						alt: c.alt,
-						style: d({ transform: Ce.value }),
-						draggable: "false"
-					}, null, 12, y)]),
-					o("div", {
-						class: "b-image-preview__toolbar",
-						role: "toolbar",
-						"aria-label": "Image preview controls",
-						onKeydown: Ae
-					}, [
-						o("button", {
-							type: "button",
-							"aria-label": "Flip horizontal",
-							"aria-pressed": z.value,
-							onClick: xe
-						}, [...l[3] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
-							o("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
-							o("line", {
-								x1: "12",
-								y1: "1",
-								x2: "12",
-								y2: "23",
-								"stroke-dasharray": "2 2"
-							})
-						], -1)]], 8, b),
-						o("button", {
-							type: "button",
-							"aria-label": "Flip vertical",
-							"aria-pressed": B.value,
-							onClick: Se
-						}, [...l[4] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("path", { d: "M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3" }),
-							o("path", { d: "M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3" }),
-							o("line", {
-								x1: "1",
-								y1: "12",
-								x2: "23",
-								y2: "12",
-								"stroke-dasharray": "2 2"
-							})
-						], -1)]], 8, x),
-						o("button", {
-							type: "button",
-							"aria-label": "Rotate left",
-							onClick: ye
-						}, [...l[5] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("polyline", { points: "1 4 1 10 7 10" }), o("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })], -1)]]),
-						o("button", {
-							type: "button",
-							"aria-label": "Rotate right",
-							onClick: be
-						}, [...l[6] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("polyline", { points: "23 4 23 10 17 10" }), o("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })], -1)]]),
-						o("button", {
-							type: "button",
-							"aria-label": "Zoom out",
-							disabled: L.value <= c.minScale,
-							onClick: ve
-						}, [...l[7] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("circle", {
-								cx: "11",
-								cy: "11",
-								r: "8"
-							}),
-							o("line", {
-								x1: "21",
-								y1: "21",
-								x2: "16.65",
-								y2: "16.65"
-							}),
-							o("line", {
-								x1: "8",
-								y1: "11",
-								x2: "14",
-								y2: "11"
-							})
-						], -1)]], 8, S),
-						o("span", C, h(Math.round(L.value * 100)) + "% ", 1),
-						o("button", {
-							type: "button",
-							"aria-label": "Zoom in",
-							disabled: L.value >= c.maxScale,
-							onClick: _e
-						}, [...l[8] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("circle", {
-								cx: "11",
-								cy: "11",
-								r: "8"
-							}),
-							o("line", {
-								x1: "21",
-								y1: "21",
-								x2: "16.65",
-								y2: "16.65"
-							}),
-							o("line", {
-								x1: "11",
-								y1: "8",
-								x2: "11",
-								y2: "14"
-							}),
-							o("line", {
-								x1: "8",
-								y1: "11",
-								x2: "14",
-								y2: "11"
-							})
-						], -1)]], 8, de),
-						o("button", {
-							type: "button",
-							"aria-label": "Reset to original size",
-							onClick: ge
-						}, [...l[9] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("rect", {
-							x: "3",
-							y: "3",
-							width: "18",
-							height: "18",
-							rx: "2",
-							ry: "2"
-						}), o("text", {
-							x: "12",
-							y: "16",
-							"text-anchor": "middle",
-							fill: "currentColor",
-							stroke: "none",
-							"font-size": "10",
-							"font-weight": "600",
-							"font-family": "system-ui"
-						}, " 1:1 ")], -1)]])
-					], 32)
-				], 42, le)) : i("", !0)]),
-				_: 1
-			})]))
-		], 6));
+import { computed as e, inject as t, onBeforeUnmount as n, provide as r, ref as i, watch as a } from "vue";
+//#region src/composables/useValidation.ts
+var o = { FormValidation: Symbol() };
+function s() {
+	let n = t(o.FormValidation, void 0);
+	n || (n = {}, r(o.FormValidation, n));
+	let i = () => n ? Object.values(n).map((e) => e.value.validate()).every((e) => e) : !1, a = () => {
+		n && Object.values(n).forEach((e) => e.value.reset());
+	}, s = e(() => n ? Object.values(n).every((e) => e.value.isValid) : !0);
+	return {
+		fields: n,
+		validateAll: i,
+		resetAll: a,
+		isValid: s
+	};
+}
+function c(r, s, c) {
+	let l = structuredClone(s.value), u = i({
+		fieldValue: s,
+		errors: [],
+		isValid: !0,
+		dirty: !1,
+		touched: !1,
+		validate: d,
+		reset: f,
+		markTouched: p
+	});
+	a(s, (e) => {
+		u.value.dirty = !Object.is(e, l);
+	}, { deep: !0 });
+	function d() {
+		let e = c.safeParse(s.value);
+		return e.success ? (u.value.errors = [], u.value.isValid = !0) : (u.value.errors = e.error.issues.map((e) => e.message), u.value.isValid = !1), u.value.isValid;
 	}
-});
+	function f() {
+		u.value.errors = [], u.value.isValid = !0, u.value.dirty = !1, u.value.touched = !1;
+	}
+	function p() {
+		u.value.touched = !0;
+	}
+	let m = t(o.FormValidation, void 0);
+	return m && (m[r] = u), n(() => {
+		m && delete m[r];
+	}), {
+		errors: e(() => u.value.errors),
+		isValid: e(() => u.value.isValid),
+		dirty: e(() => u.value.dirty),
+		touched: e(() => u.value.touched),
+		validate: d,
+		reset: f,
+		markTouched: p
+	};
+}
 //#endregion
-export { w as default };
+export { o as PIKey, c as useValidationField, s as useValidationForm };
 
 //# sourceMappingURL=design-system101.js.map