@moubing/bing-ui 0.11.2 → 0.12.0

package/dist/components/BingFormItem/BingFormItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,252 @@
+import { useConfigSize as e } from "../../utils/config.js";
+import { useReducedMotion as t } from "../../motion/reducedMotion.js";
+import { bingFormContextKey as n, bingFormItemContextKey as r } from "../BingForm/BingForm.context.js";
+import { findFormControlTarget as i } from "../BingForm/formFocus.js";
+import { Transition as ee, computed as a, createBlock as te, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as ne, defineComponent as l, h as u, inject as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as re, openBlock as h, provide as ie, ref as ae, renderSlot as oe, shallowReactive as se, toDisplayString as g, unref as _, useId as ce, watch as v, withCtx as y } from "vue";
+import { gsap as b } from "gsap";
+//#region src/components/BingFormItem/BingFormItem.vue?vue&type=script&setup=true&lang.ts
+var le = { class: "bing-form-item__control" }, ue = { class: "bing-form-item__label-text" }, de = {
+	key: 0,
+	class: "bing-form-item__required",
+	"aria-hidden": "true"
+}, x = {
+	key: 1,
+	class: "bing-form-item__message-slot",
+	"aria-live": "polite"
+}, S = ["id", "role"], C = /* @__PURE__ */ l({
+	__name: "BingFormItem",
+	props: {
+		prop: { default: void 0 },
+		label: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		span: { default: 1 },
+		help: { default: void 0 },
+		showMessage: {
+			type: Boolean,
+			default: !0
+		},
+		labelPosition: { default: void 0 }
+	},
+	setup(C) {
+		let w = t(), T = C, E = d(n, null), D = `bing-form-item-${ce()}`, O = ae(null), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Set(), j = !1, M = 0, N = a(() => `${D}-control`), P = se(/* @__PURE__ */ new Set()), F = {
+			label: () => T.label ?? T.prop ?? "字段",
+			element: () => O.value,
+			target: Z
+		}, I = E?.nextHint?.register(F), L = a(() => T.label ? `${D}-label` : void 0), R = a(() => {
+			let e = [...P];
+			return e.length === 0 ? N.value : e.length === 1 && !e[0].group ? e[0].id.value : void 0;
+		}), z = l({ setup(e, { slots: t }) {
+			return () => u("label", {
+				id: L.value,
+				for: R.value
+			}, t.default?.());
+		} }), B = a(() => T.prop && E ? E.getFieldErrors(T.prop) : []), V = a(() => B.value.length > 0), H = a(() => V.value ? B.value[0] : T.help), U = a(() => T.showMessage && !!H.value), W = a(() => U.value ? `${D}-message` : void 0), G = W, K = a(() => V.value ? "error" : "default"), q = e(() => E?.size.value), J = a(() => E?.disabled.value ?? !1), fe = a(() => T.labelPosition ?? E?.labelPosition.value ?? "top"), pe = a(() => E?.labelWidth.value ?? "112px"), me = a(() => [
+			"bing-form-item",
+			`bing-form-item--${q.value}`,
+			`bing-form-item--label-${fe.value}`,
+			{
+				"is-required": T.required,
+				"is-invalid": V.value,
+				"is-disabled": J.value,
+				"has-label": !!T.label,
+				"has-message": U.value
+			}
+		]), he = a(() => {
+			let e = ge(Y(T.span), E?.columns.value ?? Y(1));
+			return {
+				"--bing-form-item-span-base": String(e.base),
+				"--bing-form-item-span-sm": String(e.sm),
+				"--bing-form-item-span-md": String(e.md),
+				"--bing-form-item-span-lg": String(e.lg),
+				"--bing-form-item-span-xl": String(e.xl),
+				"--bing-form-item-label-width": pe.value
+			};
+		});
+		function Y(e) {
+			let t = [
+				"base",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			], n = {
+				base: 1,
+				sm: 1,
+				md: 1,
+				lg: 1,
+				xl: 1
+			};
+			if (typeof e == "number") {
+				let r = Math.max(1, Math.floor(e));
+				return t.forEach((e) => {
+					n[e] = r;
+				}), n;
+			}
+			let r = 1;
+			return t.forEach((t) => {
+				let i = e[t];
+				typeof i == "number" && (r = Math.max(1, Math.floor(i))), n[t] = r;
+			}), n;
+		}
+		function ge(e, t) {
+			let n = [
+				"base",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			], r = {};
+			return n.forEach((n) => {
+				r[n] = Math.min(e[n], Math.max(1, t[n]));
+			}), r;
+		}
+		async function X(e) {
+			if (!T.prop || !E) return;
+			let t = T.prop, n = ++M;
+			await f(), !(n !== M || T.prop !== t) && await E.validateField(t, e);
+		}
+		function _e() {
+			X("change");
+		}
+		function ve() {
+			X("blur");
+		}
+		function ye() {
+			O.value?.scrollIntoView({
+				block: "center",
+				behavior: w() ? "auto" : "smooth"
+			});
+		}
+		function Z() {
+			let e = O.value;
+			if (!e || J.value) return null;
+			for (let t of P) {
+				let n = e.ownerDocument.getElementById(t.id.value), r = n && e.contains(n) ? i(n) : null;
+				if (r) return r;
+			}
+			return P.size ? null : i(e.querySelector(".bing-form-item__control"));
+		}
+		function be(e) {
+			e.classList.contains("is-error") && !w() && b.set(e, { opacity: 0 });
+		}
+		function xe(e, t) {
+			if (!e.classList.contains("is-error") || w()) {
+				t();
+				return;
+			}
+			Q(e, 1, .16, t);
+		}
+		function Se(e, t) {
+			if ($(e), e.setAttribute("aria-hidden", "true"), !e.classList.contains("is-error") || w()) {
+				f(() => {
+					j || t();
+				});
+				return;
+			}
+			A.add(e), Q(e, 0, .1, t);
+		}
+		function Q(e, t, n, r) {
+			let i = b.to(e, {
+				opacity: t,
+				duration: n,
+				ease: "power1.out",
+				clearProps: "opacity",
+				overwrite: !0,
+				onComplete: () => {
+					k.delete(e), A.delete(e), r();
+				}
+			});
+			k.set(e, i);
+		}
+		function $(e) {
+			k.get(e)?.kill(), k.delete(e), A.delete(e);
+		}
+		return v(V, (e) => {
+			if (e) for (let e of A) k.get(e)?.progress(1);
+		}), v(() => T.showMessage, (e) => {
+			if (!e) for (let e of k.keys()) $(e);
+		}), v(() => T.prop, (e, t, n) => {
+			if (!E || !e) return;
+			let r = {
+				prop: e,
+				scrollToField: ye,
+				element: () => O.value,
+				target: Z
+			};
+			E.registerField(r), n(() => {
+				E.unregisterField(r);
+			});
+		}, { immediate: !0 }), re(() => {
+			j = !0, M += 1, I?.();
+			for (let e of k.keys()) $(e);
+		}), ie(r, {
+			controlId: N,
+			ariaDescribedby: G,
+			isInvalid: V,
+			status: K,
+			size: q,
+			disabled: J,
+			handleControlChange: _e,
+			handleControlBlur: ve,
+			labelId: L,
+			nextControlId: (e) => P.size === 0 ? N.value : e,
+			registerControl(e) {
+				return P.add(e), () => {
+					P.delete(e);
+				};
+			}
+		}), (e, t) => (h(), s("div", {
+			ref_key: "rootRef",
+			ref: O,
+			class: p(me.value),
+			style: m(he.value)
+		}, [
+			c("div", le, [oe(e.$slots, "default", {
+				id: N.value,
+				status: K.value,
+				ariaDescribedby: _(G),
+				invalid: V.value,
+				disabled: J.value,
+				size: _(q)
+			}, void 0, !0)]),
+			C.label ? (h(), te(_(z), {
+				key: 0,
+				class: "bing-form-item__label"
+			}, {
+				default: y(() => [
+					c("span", ue, g(C.label), 1),
+					C.required ? (h(), s("span", de, "*")) : o("", !0),
+					t[0] ||= c("span", {
+						class: "bing-form-item__colon",
+						"aria-hidden": "true"
+					}, ":", -1)
+				]),
+				_: 1
+			})) : o("", !0),
+			C.showMessage ? (h(), s("div", x, [c("p", {
+				id: W.value,
+				class: p(["bing-form-item__message", { "is-error": V.value }]),
+				role: U.value ? V.value ? "alert" : "status" : void 0
+			}, [ne(ee, {
+				mode: "out-in",
+				css: !1,
+				onBeforeEnter: be,
+				onEnter: xe,
+				onLeave: Se,
+				onEnterCancelled: $,
+				onLeaveCancelled: $
+			}, {
+				default: y(() => [U.value ? (h(), s("span", {
+					key: V.value ? "error" : "help",
+					class: p(["bing-form-item__message-text", { "is-error": V.value }])
+				}, g(H.value), 3)) : o("", !0)]),
+				_: 1
+			})], 10, S)])) : o("", !0)
+		], 6));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BingIcon/BingIcon.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./BingIcon.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                         */
+//#region src/components/BingIcon/BingIcon.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-41faf91e"]]);
+//#endregion
+export { n as default };

package/dist/components/BingIcon/BingIcon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { computed as e, createBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, resolveDynamicComponent as o } from "vue";
+//#region src/components/BingIcon/BingIcon.vue?vue&type=script&setup=true&lang.ts
+var s = /* @__PURE__ */ n({
+	__name: "BingIcon",
+	props: {
+		icon: {},
+		size: { default: "md" },
+		tone: { default: "inherit" },
+		strokeWidth: { default: 1.75 },
+		decorative: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: void 0 }
+	},
+	setup(n) {
+		let s = n, c = {
+			xs: "14px",
+			sm: "16px",
+			md: "20px",
+			lg: "24px",
+			xl: "32px"
+		};
+		function l(e) {
+			return typeof e == "string" && e in c;
+		}
+		let u = e(() => typeof s.size == "number" ? `${s.size}px` : l(s.size) ? c[s.size] : s.size), d = e(() => ["bing-icon", `bing-icon--${s.tone}`]), f = e(() => s.decorative || !s.label);
+		return (e, s) => (a(), t(o(n.icon), {
+			class: r(d.value),
+			style: i({
+				width: u.value,
+				height: u.value,
+				strokeWidth: n.strokeWidth
+			}),
+			"aria-hidden": f.value || void 0,
+			"aria-label": f.value ? void 0 : n.label,
+			role: f.value ? void 0 : "img"
+		}, null, 8, [
+			"class",
+			"style",
+			"aria-hidden",
+			"aria-label",
+			"role"
+		]));
+	}
+});
+//#endregion
+export { s as default };

package/dist/components/BingImage/BingImage.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./BingImage.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                          */
+//#region src/components/BingImage/BingImage.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-de0bba92"]]);
+//#endregion
+export { n as default };

package/dist/components/BingImage/BingImage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,244 @@
+import { useClickFeedback as e } from "../../motion/useClickFeedback.js";
+import t from "../BingImagePreview/BingImagePreview.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as ee, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as te, watch as p } from "vue";
+//#region src/components/BingImage/BingImage.vue?vue&type=script&setup=true&lang.ts
+var ne = [
+	"aria-busy",
+	"role",
+	"tabindex",
+	"aria-label"
+], m = [
+	"src",
+	"alt",
+	"srcset",
+	"sizes",
+	"width",
+	"height",
+	"loading",
+	"decoding",
+	"fetchpriority",
+	"crossorigin",
+	"referrerpolicy"
+], h = {
+	key: 1,
+	class: "bing-image__placeholder",
+	"aria-hidden": "true"
+}, g = ["src"], _ = {
+	key: 2,
+	class: "bing-image__loading",
+	"aria-hidden": "true"
+}, v = ["aria-label"], y = { class: "bing-image__error-text" }, b = /* @__PURE__ */ s({
+	__name: "BingImage",
+	props: {
+		src: { default: void 0 },
+		alt: { default: "" },
+		srcset: { default: void 0 },
+		sizes: { default: void 0 },
+		width: { default: void 0 },
+		height: { default: void 0 },
+		aspectRatio: { default: void 0 },
+		fit: { default: "cover" },
+		position: { default: "center" },
+		radius: { default: "md" },
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		loading: { default: "lazy" },
+		decoding: { default: "async" },
+		fetchPriority: { default: "auto" },
+		fallbackSrc: { default: void 0 },
+		placeholderSrc: { default: void 0 },
+		showLoading: {
+			type: Boolean,
+			default: !0
+		},
+		showError: {
+			type: Boolean,
+			default: !0
+		},
+		errorText: { default: "图片加载失败" },
+		crossorigin: { default: void 0 },
+		referrerPolicy: { default: void 0 },
+		preview: {
+			type: Boolean,
+			default: !1
+		},
+		previewSrc: { default: void 0 },
+		previewItems: { default: void 0 },
+		previewInitialIndex: { default: 0 },
+		previewDownloadable: {
+			type: Boolean,
+			default: !1
+		},
+		previewDownloadUrl: { default: void 0 },
+		previewDownloadName: { default: void 0 },
+		previewAriaLabel: { default: "预览图片" }
+	},
+	emits: [
+		"load",
+		"error",
+		"statusChange",
+		"previewOpen",
+		"previewClose"
+	],
+	setup(s, { emit: b }) {
+		let { playClickFeedback: x } = e(), S = s, C = b, w = d(null), T = d("idle"), E = d(void 0), D = d(void 0), O = d(0), k = d(!1), A = d(!1), j = n(() => !!E.value), M = n(() => T.value === "loading"), N = n(() => T.value === "loaded"), P = n(() => T.value === "error"), F = n(() => M.value || !N.value && !!S.placeholderSrc), I = n(() => S.preview && N.value && j.value && !P.value), L = n(() => [
+			"bing-image",
+			`bing-image--rounded-${S.radius}`,
+			{
+				"is-block": S.block,
+				"is-loading": M.value,
+				"is-loaded": N.value,
+				"is-error": P.value,
+				"is-previewable": I.value,
+				"has-placeholder-image": S.placeholderSrc
+			}
+		]), R = n(() => {
+			let e = {
+				"--bing-image-fit": S.fit,
+				"--bing-image-position": S.position
+			}, t = K(S.width), n = K(S.height), r = q(S.aspectRatio);
+			return t && (e.width = t), n && (e.height = n), r && (e.aspectRatio = r), e;
+		}), z = n(() => J(S.width)), B = n(() => J(S.height)), V = n(() => E.value === S.src ? S.srcset : void 0), H = n(() => E.value === S.src ? S.sizes : void 0), U = n(() => S.alt || S.errorText), W = n(() => S.previewAriaLabel || (S.alt ? `预览 ${S.alt}` : "预览图片")), G = n(() => {
+			if (S.previewItems?.length) return S.previewItems;
+			let e = E.value;
+			if (!e) return [];
+			let t = S.previewSrc || e;
+			return [{
+				src: e,
+				previewSrc: t,
+				alt: S.alt,
+				downloadUrl: S.previewDownloadUrl || t,
+				downloadName: S.previewDownloadName
+			}];
+		});
+		function K(e) {
+			if (!(e === void 0 || e === "")) return typeof e == "number" ? `${e}px` : e;
+		}
+		function q(e) {
+			if (!(e === void 0 || e === "")) return String(e);
+		}
+		function J(e) {
+			if (typeof e == "number" || typeof e == "string" && /^\d+$/.test(e)) return e;
+		}
+		function Y(e) {
+			T.value !== e && (T.value = e, C("statusChange", {
+				status: e,
+				src: E.value
+			}));
+		}
+		function X(e) {
+			E.value = e, O.value += 1, Y(e ? "loading" : "idle");
+		}
+		function Z() {
+			let e = w.value;
+			!e || !E.value || e.complete && e.naturalWidth > 0 && (D.value = void 0, Y("loaded"));
+		}
+		function Q(e) {
+			k.value = !1, D.value = void 0, X(e), ee(Z);
+		}
+		function re() {
+			Q(S.src);
+		}
+		function $() {
+			I.value && (A.value = !0, C("previewOpen", { src: S.previewSrc || E.value || "" }));
+		}
+		function ie(e) {
+			e.defaultPrevented || !I.value || (x(e), $());
+		}
+		function ae(e) {
+			I.value && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), x(e), $()));
+		}
+		function oe(e) {
+			C("previewClose", { reason: e });
+		}
+		function se(e) {
+			let t = e.currentTarget, n = E.value;
+			n && (D.value = void 0, Y("loaded"), C("load", {
+				event: e,
+				src: n,
+				naturalWidth: t.naturalWidth,
+				naturalHeight: t.naturalHeight
+			}));
+		}
+		function ce(e) {
+			let t = E.value || "", n = !!S.fallbackSrc && S.fallbackSrc !== t && !k.value;
+			if (C("error", {
+				event: e,
+				src: t,
+				isFallback: k.value
+			}), n) {
+				k.value = !0, X(S.fallbackSrc);
+				return;
+			}
+			D.value = t, Y("error");
+		}
+		return p(() => S.src, (e) => {
+			Q(e);
+		}, { immediate: !0 }), (e, n) => (u(), a("figure", {
+			class: c(L.value),
+			style: l(R.value),
+			"aria-busy": M.value || void 0,
+			role: I.value ? "button" : void 0,
+			tabindex: I.value ? 0 : void 0,
+			"aria-label": I.value ? W.value : void 0,
+			onClick: ie,
+			onKeydown: ae
+		}, [
+			j.value ? (u(), a("img", {
+				key: O.value,
+				ref_key: "imageRef",
+				ref: w,
+				class: "bing-image__img",
+				src: E.value,
+				alt: s.alt,
+				srcset: V.value,
+				sizes: H.value,
+				width: z.value,
+				height: B.value,
+				loading: s.loading,
+				decoding: s.decoding,
+				fetchpriority: s.fetchPriority,
+				crossorigin: s.crossorigin,
+				referrerpolicy: s.referrerPolicy,
+				onLoad: se,
+				onError: ce
+			}, null, 40, m)) : i("", !0),
+			F.value ? (u(), a("div", h, [f(e.$slots, "placeholder", {}, () => [s.placeholderSrc ? (u(), a("img", {
+				key: 0,
+				class: "bing-image__placeholder-img",
+				src: s.placeholderSrc,
+				alt: "",
+				loading: "eager",
+				decoding: "async"
+			}, null, 8, g)) : i("", !0), n[1] ||= o("span", { class: "bing-image__skeleton" }, null, -1)], !0)])) : i("", !0),
+			s.showLoading && M.value ? (u(), a("div", _, [f(e.$slots, "loading", {}, () => [n[2] ||= o("span", { class: "bing-image__spinner" }, null, -1)], !0)])) : i("", !0),
+			s.showError && P.value ? (u(), a("div", {
+				key: 3,
+				class: "bing-image__error",
+				role: "img",
+				"aria-label": U.value
+			}, [f(e.$slots, "error", {
+				src: D.value,
+				retry: re
+			}, () => [n[3] ||= o("span", { class: "bing-image__error-mark" }, "!", -1), o("span", y, te(s.errorText), 1)], !0)], 8, v)) : i("", !0),
+			s.preview ? (u(), r(t, {
+				key: 4,
+				modelValue: A.value,
+				"onUpdate:modelValue": n[0] ||= (e) => A.value = e,
+				items: G.value,
+				"initial-index": s.previewInitialIndex,
+				downloadable: s.previewDownloadable,
+				onClose: oe
+			}, null, 8, [
+				"modelValue",
+				"items",
+				"initial-index",
+				"downloadable"
+			])) : i("", !0)
+		], 46, ne));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BingImagePreview/BingImagePreview.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./BingImagePreview.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                 */
+//#region src/components/BingImagePreview/BingImagePreview.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-aec073fa"]]);
+//#endregion
+export { n as default };

package/dist/components/BingImagePreview/BingImagePreview.vue.d.ts

@@ -1,18 +1,17 @@
 import { BingImagePreviewCloseReason, BingImagePreviewProps } from './BingImagePreview.types';
 declare const __VLS_export: import('vue').DefineComponent<BingImagePreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (index: number, item: import('./BingImagePreview.types').BingImagePreviewItem) => any;
     close: (reason: BingImagePreviewCloseReason) => any;
+    change: (index: number, item: import('./BingImagePreview.types').BingImagePreviewItem) => any;
+    download: (payload: import('./BingImagePreview.types').BingImagePreviewDownloadPayload) => any;
     "update:modelValue": (value: boolean) => any;
     "update:currentIndex": (value: number) => any;
-    download: (payload: import('./BingImagePreview.types').BingImagePreviewDownloadPayload) => any;
 }, string, import('vue').PublicProps, Readonly<BingImagePreviewProps> & Readonly<{
-    onChange?: ((index: number, item: import('./BingImagePreview.types').BingImagePreviewItem) => any) | undefined;
     onClose?: ((reason: BingImagePreviewCloseReason) => any) | undefined;
+    onChange?: ((index: number, item: import('./BingImagePreview.types').BingImagePreviewItem) => any) | undefined;
+    onDownload?: ((payload: import('./BingImagePreview.types').BingImagePreviewDownloadPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onUpdate:currentIndex"?: ((value: number) => any) | undefined;
-    onDownload?: ((payload: import('./BingImagePreview.types').BingImagePreviewDownloadPayload) => any) | undefined;
 }>, {
-    zIndex: number;
     items: import('./BingImagePreview.types').BingImagePreviewItem[];
     ariaLabel: string;
     modelValue: boolean;