@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system110.js

@@ -1,9 +1,510 @@
-import e from "./design-system14.js";
-import t from "./design-system108.js";
-/* empty css                 */
-//#region src/components/BInputNumber/BInputNumber.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-64ad79ae"]]);
+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));
+	}
+});
 //#endregion
-export { n as default };
+export { w as default };
 
 //# sourceMappingURL=design-system110.js.map