@moubing/bing-ui 0.11.2 → 0.12.1

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

@@ -1,21 +1,22 @@
-import { BingColorPickerChangePayload, BingColorPickerExpose, BingColorPickerPresetInput, BingColorPickerProps } from './BingColorPicker.types';
+import { BingColorPickerChangePayload, BingColorPickerExpose, BingColorPickerProps } from './BingColorPicker.types';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<BingColorPickerProps, BingColorPickerExpose, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (payload: BingColorPickerChangePayload) => any;
     close: () => any;
+    open: () => any;
+    change: (payload: BingColorPickerChangePayload) => any;
     copy: (payload: import('./BingColorPicker.types').BingColorPickerCopyPayload) => any;
     "update:modelValue": (value: string) => any;
-    open: () => any;
     copyError: (error: Error) => any;
 }, string, import('vue').PublicProps, Readonly<BingColorPickerProps> & Readonly<{
-    onChange?: ((payload: BingColorPickerChangePayload) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onChange?: ((payload: BingColorPickerChangePayload) => any) | undefined;
     onCopy?: ((payload: import('./BingColorPicker.types').BingColorPickerCopyPayload) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onCopyError?: ((error: Error) => any) | undefined;
 }>, {
+    status: "default" | "error" | "success" | "warning";
     disabled: boolean;
     minWidth: string | number;
     width: string | number;
@@ -25,7 +26,6 @@ declare const __VLS_export: import('vue').DefineComponent<BingColorPickerProps,
     ariaLabel: string;
     modelValue: import('./BingColorPicker.types').BingColorPickerModelValue;
     ariaDescribedby: string;
-    status: "default" | "error" | "success" | "warning";
     glass: boolean;
     glassBlur: string | number;
     glassOpacity: number;
@@ -34,5 +34,5 @@ declare const __VLS_export: import('vue').DefineComponent<BingColorPickerProps,
     copyLabel: string;
     copiedLabel: string;
     copyResetDelay: number;
-    presets: BingColorPickerPresetInput[];
+    presets: import('./BingColorPicker.types').BingColorPickerPresetInput[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BingColorPicker/BingColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,540 @@
+import { useConfigZIndex as e } from "../../utils/config.js";
+import { useReducedMotion as t } from "../../motion/reducedMotion.js";
+import { useClickFeedback as n } from "../../motion/useClickFeedback.js";
+import { isolateFormControls as r, useFormControl as i } from "../BingForm/useFormControl.js";
+import { ChevronDown as a } from "../../icons/icons.js";
+import ee from "../BingIcon/BingIcon.js";
+import te from "../BingScrollbar/BingScrollbar.js";
+import { useOverlay as ne } from "../../utils/overlay.js";
+import { useClientReady as re } from "../../utils/useClientReady.js";
+import { createGlassCssVariables as ie, defaultGlassEffect as o } from "../../utils/glass.js";
+import { writeTextWithClipboardApi as ae, writeTextWithTextareaFallback as oe } from "../../utils/clipboard.js";
+import { computeFloatingPosition as se, useFloatingAutoUpdate as ce } from "../../utils/floating.js";
+import { clamp as le, createColorValue as ue, defaultColor as de, defaultPresets as fe, getColorFormatValue as pe, getHueFromHex as s, hexToRgb as me, hsvToRgb as he, normalizeAlpha as ge, normalizeCssLength as _e, normalizeHex as ve, normalizeHue as ye, normalizePreset as be, parseColorInput as xe, parseCssSize as Se, resolveAlpha as Ce, resolveColor as we, rgbToHex as Te, rgbToHsv as Ee } from "./BingColorPicker.utils.js";
+import De from "./BingColorPickerFormatEditor.js";
+import Oe from "./BingColorPickerSpectrum.js";
+import { Fragment as ke, Teleport as Ae, computed as c, createBlock as je, createCommentVNode as Me, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as Ne, openBlock as g, ref as _, renderList as Pe, toDisplayString as Fe, unref as v, watch as y, withCtx as Ie, withDirectives as Le, withModifiers as Re } from "vue";
+import { gsap as b } from "gsap";
+//#region src/components/BingColorPicker/BingColorPicker.vue?vue&type=script&setup=true&lang.ts
+var ze = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-expanded"
+], Be = {
+	class: "bing-color-picker__swatch-wrap",
+	"aria-hidden": "true"
+}, Ve = { class: "bing-color-picker__trigger-value" }, He = { class: "bing-color-picker__trigger-format" }, Ue = {
+	class: "bing-color-picker__chevron",
+	"aria-hidden": "true"
+}, We = ["aria-label"], Ge = { class: "bing-color-picker__body" }, Ke = {
+	class: "bing-color-picker__presets",
+	"aria-label": "预设颜色"
+}, qe = [
+	"aria-label",
+	"aria-pressed",
+	"title",
+	"disabled",
+	"onClick"
+], Je = {
+	class: "bing-color-picker__preset-surface",
+	"aria-hidden": "true"
+}, Ye = 0, x = 320, Xe = 280, Ze = 180, S = /* @__PURE__ */ f({
+	__name: "BingColorPicker",
+	props: {
+		id: { default: void 0 },
+		modelValue: { default: de },
+		presets: { default: () => fe },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		size: { default: void 0 },
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: void 0 },
+		minWidth: { default: 180 },
+		panelWidth: { default: x },
+		copyLabel: { default: "复制" },
+		copiedLabel: { default: "已复制" },
+		copyResetDelay: { default: 1400 },
+		ariaLabel: { default: void 0 },
+		ariaDescribedby: { default: void 0 },
+		status: { default: void 0 },
+		glass: {
+			type: Boolean,
+			default: o.glass
+		},
+		glassBlur: { default: void 0 },
+		glassOpacity: { default: void 0 },
+		glassSaturation: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"copy",
+		"copyError",
+		"open",
+		"close"
+	],
+	setup(o, { expose: de, emit: fe }) {
+		let f = t(), { vClickFeedback: S, playClickFeedback: Qe } = n(), C = o, w = fe, $e = re(), { formItem: T, resolvedId: et, resolvedSize: tt, resolvedDisabled: E, resolvedStatus: nt, resolvedAriaDescribedby: rt } = i(C);
+		r();
+		let it = `bing-color-picker-${++Ye}`, at = `${it}-panel`, D = _(null), O = _(null), k = _(null), ot = _(null), A = _(we(C.modelValue)), j = _(Ce(C.modelValue)), M = _(A.value), N = _(j.value), P = _("hex"), F = _(Ee(me(M.value)).h), I = _(!1), L = _(!1), R = _(null), z = _({
+			left: 0,
+			placement: "bottom",
+			top: 0,
+			width: x
+		}), B = !1, V, H, U, W, G, st = c(() => ie("bing-color-picker", {
+			glass: C.glass,
+			glassBlur: C.glassBlur,
+			glassOpacity: C.glassOpacity,
+			glassSaturation: C.glassSaturation
+		})), ct = c(() => {
+			let e = {
+				"--bing-color-picker-min-width": _e(C.minWidth),
+				"--bing-color-picker-width": `${Xe}px`,
+				...st.value
+			};
+			return C.width !== void 0 && (e["--bing-color-picker-width"] = _e(C.width)), e;
+		}), K = ce(At, { enabled: () => I.value }), lt = e("colorPicker"), q = ne({
+			open: () => L.value,
+			elements: () => [D.value, k.value],
+			zIndex: () => lt.value,
+			onEscape: () => $(!0)
+		}), ut = c(() => ({
+			left: `${z.value.left}px`,
+			position: "fixed",
+			top: `${z.value.top}px`,
+			width: `${z.value.width}px`,
+			zIndex: q.zIndex.value,
+			...st.value
+		})), dt = c(() => [
+			"bing-color-picker",
+			`bing-color-picker--${tt.value}`,
+			`bing-color-picker--status-${nt.value}`,
+			{
+				"is-open": I.value,
+				"is-block": C.block || !!T,
+				"is-disabled": E.value,
+				"is-invalid": nt.value === "error"
+			}
+		]), ft = c(() => [
+			"bing-color-picker__panel",
+			`is-placement-${z.value.placement}`,
+			{ "is-glass": C.glass }
+		]), J = c(() => ue(M.value, N.value)), pt = c(() => ue(A.value, j.value)), Y = c(() => ({
+			...Ee(J.value.rgb),
+			h: F.value
+		})), mt = c(() => ({ "--bing-color-picker-selected-color": pt.value.rgba })), ht = c(() => C.presets.map(be).filter((e) => !!e)), gt = c(() => pe(pt.value, P.value)), _t = c(() => C.ariaLabel ?? `已选颜色 ${gt.value}`);
+		y(() => C.modelValue, (e) => {
+			if (G?.value === e) {
+				G = void 0;
+				return;
+			}
+			G = void 0, vt(e);
+		}), y(() => [C.panelWidth, C.presets.length], () => {
+			I.value && p(K.schedule);
+		}), y(() => E.value, (e) => {
+			e && $();
+		}), Ne(() => {
+			kt(), K.dispose(), Wt(), Z(), Pt(), b.killTweensOf([k.value, ...Nt()].filter(Boolean));
+		});
+		function X() {
+			return typeof window < "u" && typeof document < "u";
+		}
+		function vt(e) {
+			let t = xe(e), n = t?.hex ?? "#ec4899";
+			Z(), W = void 0, M.value = n, N.value = t?.alpha ?? 1, A.value = n, j.value = t?.alpha ?? 1, F.value = s(n, F.value);
+		}
+		function yt(e) {
+			return {
+				...J.value,
+				value: J.value.hex,
+				source: e
+			};
+		}
+		function Z() {
+			if (!X() || U === void 0) {
+				U = void 0;
+				return;
+			}
+			window.clearTimeout(U), U = void 0;
+		}
+		function Q(e = W) {
+			Z();
+			let t = e ?? "field", n = J.value.hex, r = A.value !== n || j.value !== N.value, i = W !== void 0;
+			if (W = void 0, !r && !i) return;
+			A.value = n, j.value = N.value;
+			let a = { value: n };
+			G = a, w("update:modelValue", n), w("change", yt(t)), T?.handleControlChange(), p(() => {
+				G === a && (G = void 0);
+			});
+		}
+		function bt(e) {
+			if (W = e, Z(), !X()) {
+				Q(e);
+				return;
+			}
+			U = window.setTimeout(() => {
+				Q(e);
+			}, Ze);
+		}
+		function xt(e, t, n = {}) {
+			let r = ve(e);
+			if (r) {
+				if (t === "preset" && (F.value = s(r, F.value)), M.value = r, n.immediate) {
+					Q(t);
+					return;
+				}
+				bt(t);
+			}
+		}
+		function St(e, t, n = {}) {
+			let r = ve(e.hex);
+			if (r) {
+				if (M.value = r, N.value = ge(e.alpha), F.value = s(r, F.value), n.immediate) {
+					Q(t);
+					return;
+				}
+				bt(t);
+			}
+		}
+		function Ct(e, t, n, r) {
+			let i = ye(e);
+			F.value = i, xt(Te(he({
+				h: i,
+				s: le(t, 0, 100),
+				v: le(n, 0, 100)
+			})), r);
+		}
+		function wt(e) {
+			N.value = ge(e), bt("alpha");
+		}
+		function Tt(e, t) {
+			St(e, "input", { immediate: t });
+		}
+		function Et() {
+			T?.handleControlBlur();
+		}
+		function Dt(e) {
+			xt(e.value, "preset", { immediate: !0 });
+		}
+		function Ot() {
+			!X() || B || (window.addEventListener("pointerdown", Vt, !0), B = !0);
+		}
+		function kt() {
+			!X() || !B || (window.removeEventListener("pointerdown", Vt, !0), B = !1);
+		}
+		function At() {
+			if (!X() || !D.value || !k.value) return;
+			let e = D.value.getBoundingClientRect(), t = window.innerWidth, n = window.innerHeight, r = Se(C.panelWidth, x), i = Math.max(0, t - 24), a = Math.min(Math.max(e.width, r), i);
+			k.value.style.width = `${a}px`;
+			let { side: ee, left: te, top: ne } = se({
+				anchor: e,
+				floating: {
+					width: a,
+					height: k.value.offsetHeight || 340
+				},
+				side: "bottom",
+				gap: 8,
+				padding: 12,
+				viewport: {
+					width: t,
+					height: n
+				}
+			});
+			z.value = {
+				left: te,
+				placement: ee,
+				top: ne,
+				width: a
+			};
+		}
+		function jt() {
+			return Array.from(k.value?.querySelectorAll(".bing-color-picker__spectrum, .bing-color-picker__format-editor") ?? []);
+		}
+		function Mt() {
+			return Array.from(k.value?.querySelectorAll(".bing-color-picker__preset-color") ?? []);
+		}
+		function Nt() {
+			return [...jt(), ...Mt()];
+		}
+		function Pt() {
+			V?.kill(), V = void 0;
+		}
+		function Ft() {
+			let e = k.value;
+			if (!e) return;
+			let t = jt(), n = Mt(), r = [...t, ...n], i = z.value.placement === "top";
+			if (Pt(), b.killTweensOf([e, ...r]), f()) {
+				b.set([e, ...r], {
+					autoAlpha: 1,
+					y: 0,
+					clearProps: "transform"
+				});
+				return;
+			}
+			V = b.timeline({
+				defaults: {
+					duration: .22,
+					ease: "power3.out",
+					overwrite: !0
+				},
+				onComplete: () => {
+					b.set([e, ...r], { clearProps: "transform" }), V = void 0;
+				}
+			}), V.fromTo(e, {
+				autoAlpha: 0,
+				y: i ? 6 : -6,
+				transformOrigin: i ? "50% 100%" : "50% 0%"
+			}, {
+				autoAlpha: 1,
+				force3D: !1,
+				y: 0,
+				duration: .2
+			}, 0).fromTo(t, {
+				autoAlpha: 0,
+				y: i ? -4 : 4
+			}, {
+				autoAlpha: 1,
+				force3D: !1,
+				y: 0,
+				duration: .16
+			}, .05).fromTo(n, {
+				autoAlpha: 0,
+				y: i ? -4 : 4
+			}, {
+				autoAlpha: 1,
+				force3D: !1,
+				y: 0,
+				duration: .18,
+				stagger: .02
+			}, .06);
+		}
+		function It(e) {
+			L.value = !1, e && O.value?.focus();
+		}
+		function Lt(e = !1) {
+			let t = k.value;
+			if (!t || f()) {
+				It(e);
+				return;
+			}
+			let n = jt(), r = Mt(), i = [...n, ...r], a = z.value.placement === "top";
+			Pt(), b.killTweensOf([t, ...i]), V = b.timeline({
+				defaults: {
+					duration: .14,
+					ease: "power2.in",
+					overwrite: !0
+				},
+				onComplete: () => {
+					V = void 0, It(e);
+				}
+			}), V.to(r, {
+				autoAlpha: 0,
+				force3D: !1,
+				y: a ? 4 : -4,
+				stagger: {
+					each: .012,
+					from: "end"
+				}
+			}, 0).to(n, {
+				autoAlpha: 0,
+				force3D: !1,
+				y: a ? 4 : -4,
+				duration: .12
+			}, .02).to(t, {
+				autoAlpha: 0,
+				force3D: !1,
+				y: a ? 6 : -6,
+				duration: .16
+			}, .02);
+		}
+		async function Rt() {
+			E.value || I.value || (L.value = !0, I.value = !0, Ot(), K.start(), w("open"), await p(), At(), Ft());
+		}
+		function $(e = !1) {
+			I.value && (W && Q(W), I.value = !1, kt(), ot.value?.cancelDrag(), K.dispose(), w("close"), Lt(e));
+		}
+		function zt() {
+			if (!E.value) {
+				if (I.value) {
+					$();
+					return;
+				}
+				Rt();
+			}
+		}
+		function Bt(e) {
+			return e instanceof Node ? !!(q.contains(e) || D.value?.contains(e) || k.value?.contains(e)) : !1;
+		}
+		function Vt(e) {
+			Bt(e.target) || $();
+		}
+		function Ht(e) {
+			Bt(e.relatedTarget) || T?.handleControlBlur();
+		}
+		function Ut(e) {
+			if (!E.value && !(e.key === "Escape" && (e.defaultPrevented || !q.isTop(e)))) {
+				if (e.key === "Escape" && I.value) {
+					e.preventDefault(), $(!0);
+					return;
+				}
+				e.currentTarget === O.value && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), Qe(e, O.value), Rt());
+			}
+		}
+		function Wt() {
+			if (!X() || H === void 0) {
+				H = void 0;
+				return;
+			}
+			window.clearTimeout(H), H = void 0;
+		}
+		function Gt() {
+			Wt(), X() && (H = window.setTimeout(() => {
+				H = void 0, R.value = null;
+			}, Math.max(0, C.copyResetDelay)));
+		}
+		async function Kt(e, t) {
+			try {
+				let n, r = !1;
+				try {
+					r = await ae(t);
+				} catch (e) {
+					n = e;
+				}
+				if (!(r || oe(t))) throw n instanceof Error ? n : /* @__PURE__ */ Error("复制功能暂不可用。");
+				R.value = e, w("copy", {
+					color: J.value,
+					format: e,
+					value: t
+				}), await p(), Gt();
+			} catch (e) {
+				w("copyError", e instanceof Error ? e : Error(String(e)));
+			}
+		}
+		return de({
+			focus: () => O.value?.focus(),
+			blur: () => O.value?.blur(),
+			openPanel: () => {
+				Rt();
+			},
+			closePanel: () => $(!0)
+		}), (e, t) => (g(), l("div", {
+			ref_key: "rootRef",
+			ref: D,
+			class: m(dt.value),
+			style: h(ct.value)
+		}, [Le((g(), l("button", {
+			id: v(et),
+			ref_key: "triggerRef",
+			ref: O,
+			class: "bing-color-picker__trigger",
+			type: "button",
+			disabled: v(E),
+			"aria-label": _t.value,
+			"aria-describedby": v(rt),
+			"aria-invalid": v(nt) === "error" || void 0,
+			"aria-haspopup": "dialog",
+			"aria-expanded": I.value,
+			"aria-controls": at,
+			onClick: zt,
+			onBlur: Ht,
+			onKeydown: Ut
+		}, [
+			u("span", Be, [u("span", {
+				class: "bing-color-picker__swatch",
+				style: h(mt.value)
+			}, null, 4)]),
+			u("span", Ve, [u("span", He, Fe(gt.value), 1)]),
+			u("span", Ue, [d(ee, {
+				icon: v(a),
+				size: "sm",
+				"stroke-width": 1.75
+			}, null, 8, ["icon"])])
+		], 40, ze)), [[v(S)]]), v($e) ? (g(), je(Ae, {
+			key: 0,
+			to: "body"
+		}, [L.value ? (g(), l("div", {
+			key: 0,
+			id: at,
+			ref_key: "panelRef",
+			ref: k,
+			class: m(ft.value),
+			style: h(ut.value),
+			role: "dialog",
+			"aria-label": _t.value,
+			onKeydown: Ut,
+			onPointerdown: t[1] ||= Re(() => {}, ["stop"]),
+			onClick: t[2] ||= Re(() => {}, ["stop"])
+		}, [d(te, {
+			class: "bing-color-picker__scroll",
+			focusable: !1
+		}, {
+			default: Ie(() => [u("div", Ge, [
+				d(Oe, {
+					ref_key: "spectrumRef",
+					ref: ot,
+					"id-prefix": it,
+					hue: Y.value.h,
+					saturation: Y.value.s,
+					value: Y.value.v,
+					color: J.value,
+					alpha: N.value,
+					disabled: v(E),
+					onHsvChange: Ct,
+					onAlphaChange: wt,
+					onCommit: Q
+				}, null, 8, [
+					"hue",
+					"saturation",
+					"value",
+					"color",
+					"alpha",
+					"disabled"
+				]),
+				u("div", Ke, [(g(!0), l(ke, null, Pe(ht.value, (e) => Le((g(), l("button", {
+					key: e.value,
+					class: m(["bing-color-picker__preset", { "is-selected": e.value === J.value.hex }]),
+					type: "button",
+					"aria-label": `选择 ${e.label}`,
+					"aria-pressed": e.value === J.value.hex,
+					title: e.label,
+					disabled: v(E),
+					onClick: (t) => Dt(e)
+				}, [u("span", Je, [u("span", {
+					class: "bing-color-picker__preset-color",
+					style: h({ backgroundColor: e.value })
+				}, null, 4)])], 10, qe)), [[v(S)]])), 128))]),
+				d(De, {
+					format: P.value,
+					"onUpdate:format": t[0] ||= (e) => P.value = e,
+					"id-prefix": it,
+					color: J.value,
+					disabled: v(E),
+					copied: R.value === P.value,
+					"copy-label": o.copyLabel,
+					"copied-label": o.copiedLabel,
+					onCommit: Tt,
+					onBlur: Et,
+					onCopy: Kt
+				}, null, 8, [
+					"format",
+					"color",
+					"disabled",
+					"copied",
+					"copy-label",
+					"copied-label"
+				])
+			])]),
+			_: 1
+		})], 46, We)) : Me("", !0)])) : Me("", !0)], 6));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/BingColorPicker/BingColorPickerFormatEditor.js

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

package/dist/components/BingColorPicker/BingColorPickerFormatEditor.vue.d.ts

@@ -0,0 +1,27 @@
+import { BingColorPickerFormat } from './BingColorPicker.types';
+import { ColorValue, ParsedColor } from './BingColorPicker.utils';
+type __VLS_Props = {
+    idPrefix: string;
+    color: ColorValue;
+    disabled: boolean;
+    copied: boolean;
+    copyLabel: string;
+    copiedLabel: string;
+};
+type __VLS_ModelProps = {
+    'format': BingColorPickerFormat;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: () => any;
+    copy: (format: BingColorPickerFormat, value: string) => any;
+    commit: (parsed: ParsedColor, immediate: boolean) => any;
+    "update:format": (value: BingColorPickerFormat) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onCopy?: ((format: BingColorPickerFormat, value: string) => any) | undefined;
+    onCommit?: ((parsed: ParsedColor, immediate: boolean) => any) | undefined;
+    "onUpdate:format"?: ((value: BingColorPickerFormat) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;