@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system245.js

@@ -1,377 +1,173 @@
-import { useComponentId as e } from "./design-system10.js";
-import { BUploadFileStatus as t, BUploadListType as n } from "./design-system244.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useModel as x, watch as ee, withModifiers as S } from "vue";
-//#region src/components/BUpload/BUpload.vue?vue&type=script&setup=true&lang.ts
-var C = [
-	"tabindex",
-	"aria-disabled",
-	"aria-label"
-], w = {
+import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
+import { useComponentId as n } from "./design-system10.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
+//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-describedby"], S = ["id"], ee = {
 	key: 0,
-	class: "b-upload__card-trigger"
-}, T = {
-	key: 1,
-	class: "b-upload__default-text"
-}, E = [
-	"accept",
-	"multiple",
-	"disabled",
-	"webkitdirectory"
-], te = {
-	key: 0,
-	class: "b-upload__item-thumbnail",
+	class: "b-tooltip__arrow",
 	"aria-hidden": "true"
-}, ne = ["src", "alt"], re = {
-	key: 1,
-	class: "b-upload__item-file-icon"
-}, D = { class: "b-upload__item-info" }, O = ["title"], k = { class: "b-upload__item-actions" }, A = ["onClick"], j = ["onClick"], M = ["disabled", "onClick"], N = ["aria-valuenow", "aria-label"], P = {
-	key: 2,
-	class: "b-upload__hint"
-}, F = /* @__PURE__ */ l({
-	inheritAttrs: !1,
-	__name: "BUpload",
-	props: /* @__PURE__ */ u({
-		accept: { default: "" },
-		action: {
-			type: [String, Function],
-			default: ""
-		},
-		multiple: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
+}, C = /* @__PURE__ */ l({
+	__name: "BTooltip",
+	props: {
+		title: {},
+		trigger: { default: () => t.Hover },
+		placement: { default: () => e.TopCenter },
+		arrow: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		directory: {
+		color: {},
+		mouseEnterDelay: { default: 100 },
+		mouseLeaveDelay: { default: 100 },
+		destroyTooltipOnHide: {
 			type: Boolean,
 			default: !1
 		},
-		maxCount: {},
-		listType: { default: () => n.Text },
-		method: { default: "POST" },
-		name: { default: "file" },
-		headers: {},
-		data: { type: [Object, Function] },
-		withCredentials: {
+		zIndex: { default: 1070 },
+		fresh: {
 			type: Boolean,
 			default: !1
 		},
-		openFileDialogOnClick: {
+		autoAdjustOverflow: { type: Boolean },
+		modelValue: {
 			type: Boolean,
-			default: !0
-		},
-		showUploadList: {
-			type: [Boolean, Object],
-			default: !0
+			default: () => void 0
 		},
-		defaultFileList: { default: () => [] },
-		beforeUpload: { type: Function },
-		customRequest: { type: Function }
-	}, {
-		fileList: { default: void 0 },
-		fileListModifiers: {}
-	}),
-	emits: /* @__PURE__ */ u([
-		"change",
-		"remove",
-		"preview",
-		"download",
-		"drop"
-	], ["update:fileList"]),
-	setup(l, { expose: u, emit: F }) {
-		let I = b(), L = x(l, "fileList"), R = F, { componentUID: z } = e(), B = h(null), V = h(!1), H = h(Array.isArray(l.defaultFileList) ? [...l.defaultFileList] : []), U = i({
-			get: () => L.value === void 0 ? H.value : L.value,
-			set: (e) => {
-				H.value = e, L.value !== void 0 && (L.value = e);
-			}
-		});
-		p(() => {
-			L.value === void 0 && l.defaultFileList.length > 0 && (H.value = [...l.defaultFileList]);
-		}), ee(() => L.value, (e) => {
-			e !== void 0 && (H.value = e);
+		toggleClass: {},
+		tooltipClass: {},
+		tooltipInnerClass: {}
+	},
+	emits: ["openChange", "update:modelValue"],
+	setup(l, { expose: C, emit: w }) {
+		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
+		b(k, (e) => {
+			e && (A.value = !0);
 		});
-		let W = i(() => l.listType === n.PictureCard || l.listType === n.PictureCircle), G = i(() => l.showUploadList === !1 ? !1 : l.showUploadList === !0 ? {
-			showPreviewIcon: !0,
-			showRemoveIcon: !0,
-			showDownloadIcon: !1
-		} : l.showUploadList), K = i(() => l.maxCount !== void 0 && l.maxCount !== 1 && U.value.length >= l.maxCount), q = 0;
-		function J() {
-			return q += 1, `b-upload-${z.value}-${q}-${Date.now()}`;
+		let M = null, N = null;
+		function P() {
+			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
 		}
-		function Y(e) {
-			return {
-				uid: J(),
-				name: e.name,
-				size: e.size,
-				type: e.type,
-				status: t.Uploading,
-				percent: 0,
-				originFileObj: e
-			};
+		function F(e = 0) {
+			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
 		}
-		function X(e, t, n) {
-			U.value = t, R("change", {
-				file: e,
-				fileList: t,
-				event: n
-			});
+		function I(e = 0) {
+			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
 		}
-		function ie(e) {
-			let t = new XMLHttpRequest();
-			t.upload.addEventListener("progress", (t) => {
-				t.lengthComputable && e.onProgress && e.onProgress({ percent: Math.round(t.loaded / t.total * 100) });
-			}), t.addEventListener("load", () => {
-				t.status >= 200 && t.status < 300 ? e.onSuccess?.(t.response) : e.onError?.(/* @__PURE__ */ Error(`Upload failed with status ${t.status}`));
-			}), t.addEventListener("error", () => {
-				e.onError?.(/* @__PURE__ */ Error("Upload network error"));
-			}), t.open(e.method || "POST", e.action, !0), e.withCredentials && (t.withCredentials = !0), e.headers && Object.entries(e.headers).forEach(([e, n]) => {
-				t.setRequestHeader(e, n);
-			});
-			let n = new FormData();
-			e.data && Object.entries(e.data).forEach(([e, t]) => {
-				n.append(e, t);
-			}), n.append(e.filename, e.file), t.send(n);
+		function L() {
+			V.value?.showPopover();
 		}
-		async function ae(e, t) {
-			if (l.beforeUpload) try {
-				let n = await l.beforeUpload(e, t);
-				if (n === !1) return;
-				if (n instanceof Blob) {
-					Z(n instanceof File ? n : new File([n], e.name, { type: n.type }));
-					return;
-				}
-			} catch {
-				return;
-			}
-			Z(e);
+		function R() {
+			V.value?.hidePopover();
 		}
-		function Z(e) {
-			let n = Y(e), r;
-			r = l.maxCount === 1 ? [n] : l.maxCount === void 0 ? [...U.value, n] : [...U.value, n].slice(-l.maxCount), X(n, r), (typeof l.action == "function" ? l.action(e) : Promise.resolve(l.action)).then((r) => {
-				let i = l.customRequest || ie, a = typeof l.data == "function" ? l.data(n) : l.data || {};
-				i({
-					action: r,
-					file: e,
-					filename: l.name,
-					headers: l.headers,
-					data: a,
-					withCredentials: l.withCredentials,
-					method: l.method,
-					onProgress: (e) => {
-						let t = {
-							...n,
-							percent: e.percent
-						};
-						X(t, U.value.map((e) => e.uid === n.uid ? t : e));
-					},
-					onSuccess: (e) => {
-						let r = {
-							...n,
-							status: t.Done,
-							percent: 100,
-							response: e
-						};
-						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
-					},
-					onError: (e) => {
-						let r = {
-							...n,
-							status: t.Error,
-							error: e
-						};
-						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
-					}
-				});
-			});
+		function z(e) {
+			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
 		}
-		function Q(e) {
-			if (!e || e.length === 0) return;
-			let t = Array.from(e), n;
-			if (l.maxCount === 1) n = t.slice(0, 1);
-			else if (l.maxCount !== void 0) {
-				let e = l.maxCount - U.value.length;
-				n = e > 0 ? t.slice(0, e) : [];
-			} else n = t;
-			n.forEach((e) => ae(e, t));
+		let B = ({ newState: e }) => {
+			z(e === "open");
+		}, V = h(null), H = h(null);
+		function U() {
+			k.value ? I() : F();
 		}
-		function oe() {
-			l.disabled || !l.openFileDialogOnClick || K.value || B.value?.click();
+		function W() {
+			F(l.mouseEnterDelay);
 		}
-		function $(e) {
-			l.disabled || K.value || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), B.value?.click());
+		function G() {
+			I(l.mouseLeaveDelay);
 		}
-		function se(e) {
-			let t = e.target;
-			Q(t.files), t.value = "";
+		function K() {
+			F();
 		}
-		function ce(e) {
-			e.preventDefault(), !l.disabled && (V.value = !0);
+		function q() {
+			I();
 		}
-		function le(e) {
-			e.preventDefault(), V.value = !1;
+		function J(e) {
+			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
 		}
-		function ue(e) {
-			e.preventDefault(), V.value = !1, !l.disabled && (R("drop", e), Q(e.dataTransfer?.files ?? null));
+		function Y() {
+			l.trigger === t.Hover && P();
 		}
-		function de(e) {
-			R("remove", e);
-			let n = U.value.filter((t) => t.uid !== e.uid);
-			X({
-				...e,
-				status: t.Removed
-			}, n);
+		function X() {
+			l.trigger === t.Hover && I(l.mouseLeaveDelay);
 		}
-		function fe(e) {
-			R("preview", e);
+		function Z() {
+			let e = H.value;
+			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
+				case t.Click:
+					e.addEventListener("click", U);
+					break;
+				case t.Focus:
+					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+				case t.Hover:
+				default:
+					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
+					break;
+			}
 		}
-		function pe(e) {
-			R("download", e);
+		function Q() {
+			let e = H.value;
+			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
 		}
-		return u({ openFileDialog: () => B.value?.click() }), (e, i) => (m(), o("div", { class: d(["b-upload", {
-			"b-upload--disabled": l.disabled,
-			"b-upload--drag-over": V.value,
-			[`b-upload--${l.listType}`]: !0
-		}]) }, [
-			!W.value || !K.value ? (m(), o("div", {
-				key: 0,
-				class: "b-upload__trigger",
-				role: "button",
-				tabindex: l.disabled ? -1 : 0,
-				"aria-disabled": l.disabled || void 0,
-				"aria-label": y(I)["aria-label"] || "Upload file",
-				onClick: oe,
-				onKeydown: $,
-				onDragover: ce,
-				onDragleave: le,
-				onDrop: ue
-			}, [_(e.$slots, "default", {}, () => [W.value ? (m(), o("div", w, [...i[0] ||= [c("<span class=\"b-upload__plus-icon\" aria-hidden=\"true\" data-v-36315fd9><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" data-v-36315fd9><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" data-v-36315fd9></line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" data-v-36315fd9></line></svg></span><span class=\"b-upload__card-text\" data-v-36315fd9>Upload</span>", 2)]])) : (m(), o("span", T, "Click to Upload"))], !0)], 40, C)) : a("", !0),
-			s("input", {
-				ref_key: "inputRef",
-				ref: B,
-				class: "b-upload__input",
-				type: "file",
-				accept: l.accept || void 0,
-				multiple: l.multiple,
-				disabled: l.disabled,
-				webkitdirectory: l.directory || void 0,
-				"aria-hidden": "true",
-				tabindex: "-1",
-				onChange: se
-			}, null, 40, E),
-			G.value !== !1 && U.value.length > 0 ? (m(), o("div", {
-				key: 1,
-				class: d(["b-upload__list", `b-upload__list--${l.listType}`]),
-				role: "list",
-				"aria-label": "Uploaded files"
-			}, [(m(!0), o(r, null, g(U.value, (e) => (m(), o("div", {
-				key: e.uid,
-				class: d(["b-upload__item", {
-					"b-upload__item--error": e.status === y(t).Error,
-					"b-upload__item--done": e.status === y(t).Done,
-					"b-upload__item--uploading": e.status === y(t).Uploading
-				}]),
-				role: "listitem"
-			}, [
-				l.listType === y(n).Text ? a("", !0) : (m(), o("span", te, [e.thumbUrl || e.url ? (m(), o("img", {
-					key: 0,
-					src: e.thumbUrl || e.url,
-					alt: e.name,
-					class: "b-upload__item-image"
-				}, null, 8, ne)) : (m(), o("span", re, [...i[1] ||= [s("svg", {
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "1.5"
-				}, [s("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" }), s("polyline", { points: "14,2 14,8 20,8" })], -1)]]))])),
-				s("span", D, [s("span", {
-					class: "b-upload__item-name",
-					title: e.name
-				}, v(e.name), 9, O)]),
-				s("span", k, [
-					G.value && G.value.showPreviewIcon && (e.url || e.thumbUrl) ? (m(), o("button", {
-						key: 0,
-						class: "b-upload__action-btn",
-						type: "button",
-						"aria-label": "Preview file",
-						onClick: S((t) => fe(e), ["stop"])
-					}, [...i[2] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [s("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), s("circle", {
-						cx: "12",
-						cy: "12",
-						r: "3"
-					})], -1)]], 8, A)) : a("", !0),
-					G.value && G.value.showDownloadIcon && e.status === y(t).Done ? (m(), o("button", {
-						key: 1,
-						class: "b-upload__action-btn",
-						type: "button",
-						"aria-label": "Download file",
-						onClick: S((t) => pe(e), ["stop"])
-					}, [...i[3] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [
-						s("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
-						s("polyline", { points: "7,10 12,15 17,10" }),
-						s("line", {
-							x1: "12",
-							y1: "15",
-							x2: "12",
-							y2: "3"
-						})
-					], -1)]], 8, j)) : a("", !0),
-					G.value && G.value.showRemoveIcon ? (m(), o("button", {
-						key: 2,
-						class: "b-upload__action-btn b-upload__action-btn--remove",
-						type: "button",
-						"aria-label": "Remove file",
-						disabled: l.disabled,
-						onClick: S((t) => de(e), ["stop"])
-					}, [...i[4] ||= [s("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"aria-hidden": "true"
-					}, [s("line", {
-						x1: "18",
-						y1: "6",
-						x2: "6",
-						y2: "18"
-					}), s("line", {
-						x1: "6",
-						y1: "6",
-						x2: "18",
-						y2: "18"
-					})], -1)]], 8, M)) : a("", !0)
-				]),
-				e.status === y(t).Uploading ? (m(), o("div", {
-					key: 1,
-					class: "b-upload__progress",
-					role: "progressbar",
-					"aria-valuenow": e.percent ?? 0,
-					"aria-valuemin": "0",
-					"aria-valuemax": "100",
-					"aria-label": `Uploading ${e.name}`
-				}, [s("div", {
-					class: "b-upload__progress-bar",
-					style: f({ width: `${e.percent ?? 0}%` })
-				}, null, 4)], 8, N)) : a("", !0)
-			], 2))), 128))], 2)) : a("", !0),
-			e.$slots.hint ? (m(), o("div", P, [_(e.$slots, "hint", {}, void 0, !0)])) : a("", !0)
-		], 2));
+		p(() => {
+			Z();
+		}), f(() => {
+			Q(), P();
+		}), b(() => l.trigger, () => {
+			Q(), Z();
+		}), b(() => l.modelValue, (e) => {
+			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
+		});
+		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
+			[e.TopLeft]: "top-left",
+			[e.TopCenter]: "top-center",
+			[e.TopRight]: "top-right",
+			[e.RightTop]: "right-top",
+			[e.RightCenter]: "right-center",
+			[e.RightBottom]: "right-bottom",
+			[e.BottomRight]: "bottom-right",
+			[e.BottomCenter]: "bottom-center",
+			[e.BottomLeft]: "bottom-left",
+			[e.LeftBottom]: "left-bottom",
+			[e.LeftCenter]: "left-center",
+			[e.LeftTop]: "left-top"
+		})[l.placement] ?? "top-center"), ne = i(() => {
+			if (l.color) return {
+				"--b-tooltip-bg": l.color,
+				"--b-tooltip-arrow-color": l.color
+			};
+		});
+		return C({
+			open: L,
+			close: R
+		}), (e, t) => (m(), o(r, null, [s("div", {
+			ref_key: "toggleRef",
+			ref: H,
+			class: u(["b-tooltip__toggle", l.toggleClass]),
+			style: d({ anchorName: $.value }),
+			"aria-describedby": k.value ? v(D) : void 0
+		}, [g(e.$slots, "default")], 14, x), s("div", {
+			ref_key: "tooltipRef",
+			ref: V,
+			popover: "manual",
+			class: u([
+				"b-tooltip__content",
+				te.value,
+				{ "b-tooltip__content--no-arrow": !l.arrow },
+				l.tooltipClass
+			]),
+			style: d([{
+				zIndex: l.zIndex,
+				positionAnchor: $.value
+			}, ne.value]),
+			role: "tooltip",
+			id: v(D),
+			onToggle: B,
+			onMouseenter: Y,
+			onMouseleave: X
+		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
 	}
 });
 //#endregion
-export { F as default };
+export { C as default };
 
 //# sourceMappingURL=design-system245.js.map