bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.65

package/dist/components/BbButton/BbButton.vue_vue_type_script_setup_true_lang.js

@@ -1,45 +1,79 @@
 import { useLogger as e } from "../../composables/useLogger.js";
-import { usePassthrough as t } from "../../composables/usePassthrough.js";
-import { useUntil as n } from "../../composables/useUntil.js";
-import { removedPropsFor as r } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttrs.js";
-import { extractDomContainer as ee } from "../../utilities/functions/extractDomContainer.js";
-import { BB_FORM_SUBMIT_LOCK as a } from "../../composables/formSubmitLock.js";
-import { useLocale as o } from "../../composables/useLocale.js";
-import s from "../BbIcon/BbIcon.vue.js";
-import c from "../BbSpinner/BbSpinner.vue.js";
+import { usePassthrough as t, variantPt as n } from "../../composables/usePassthrough.js";
+import { useUntil as r } from "../../composables/useUntil.js";
+import { removedPropsFor as i } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as ee } from "../../utilities/functions/warnRemovedAttrs.js";
+import { extractHtmlContainer as a } from "../../utilities/functions/extractDomContainer.js";
+import { BB_FORM_SUBMIT_LOCK as o } from "../../composables/formSubmitLock.js";
+import { useLocale as s } from "../../composables/useLocale.js";
+import c from "../BbIcon/BbIcon.vue.js";
+import te from "../BbSpinner/BbSpinner.vue.js";
+import { provideLinkState as ne, useLinkState as re } from "../BbBaseButton/useLinkState.js";
 import l from "../BbBaseButton/BbBaseButton.vue.js";
-import { useBbFormSavingById as u } from "../../composables/useBbFormContext.js";
-import { pickBy as d } from "../../utilities/functions/pickBy.js";
-import { noop as f } from "../../utilities/functions/noop.js";
-import { isEqual as p } from "../../utilities/functions/isEqual.js";
-import { BB_BUTTON_PT as m } from "./types.js";
-import { useToggleRoving as h } from "./toggleRoving.js";
-import { Transition as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as te, createElementVNode as ne, createTextVNode as re, defineComponent as b, inject as x, mergeModels as S, mergeProps as C, openBlock as w, ref as T, renderSlot as E, toDisplayString as D, unref as O, useAttrs as k, useModel as A, watchEffect as j, withCtx as M } from "vue";
+import { useBbFormSavingById as ie } from "../../composables/useBbFormContext.js";
+import { pickBy as u } from "../../utilities/functions/pickBy.js";
+import { noop as d } from "../../utilities/functions/noop.js";
+import { isEqual as f } from "../../utilities/functions/isEqual.js";
+import { BB_BUTTON_PT as p } from "./types.js";
+import { useToggleRoving as m } from "./toggleRoving.js";
+import { Fragment as h, Transition as g, computed as _, createBlock as v, createCommentVNode as y, createElementBlock as b, createElementVNode as ae, createTextVNode as oe, defineComponent as x, guardReactiveProps as S, inject as se, mergeModels as C, mergeProps as w, normalizeProps as T, openBlock as E, ref as D, renderSlot as O, toDisplayString as k, unref as A, useAttrs as j, useModel as ce, useSlots as le, watchEffect as M, withCtx as N } from "vue";
 //#region src/components/BbButton/BbButton.vue?vue&type=script&setup=true&lang.ts
-var N = {
-	key: 3,
+var P = {
+	key: 5,
 	class: "bb-button__loading-label bb-sr-only"
-}, P = /*@__PURE__*/ b({
+}, F = /*@__PURE__*/ x({
+	mixins: [n(p)],
 	inheritAttrs: !1,
 	__name: "BbButton",
-	props: /*@__PURE__*/ S({
+	props: /*@__PURE__*/ C({
 		"pt:root": {},
 		"pt:icon": {},
 		"pt:spinner": {},
 		"pt:text": {},
+		"pt:root:activeLink": {},
+		"pt:root:exactActiveLink": {},
 		"pt:root:loading": {},
 		"pt:root:disabled": {},
 		"pt:root:pressed": {},
+		"pt:icon:activeLink": {},
+		"pt:icon:exactActiveLink": {},
 		"pt:icon:loading": {},
 		"pt:icon:disabled": {},
 		"pt:icon:pressed": {},
+		"pt:spinner:activeLink": {},
+		"pt:spinner:exactActiveLink": {},
 		"pt:spinner:loading": {},
 		"pt:spinner:disabled": {},
 		"pt:spinner:pressed": {},
+		"pt:text:activeLink": {},
+		"pt:text:exactActiveLink": {},
 		"pt:text:loading": {},
 		"pt:text:disabled": {},
 		"pt:text:pressed": {},
+		"pt:root:primary": {},
+		"pt:root:outline": {},
+		"pt:root:secondary": {},
+		"pt:root:ghost": {},
+		"pt:root:destructive": {},
+		"pt:root:link": {},
+		"pt:icon:primary": {},
+		"pt:icon:outline": {},
+		"pt:icon:secondary": {},
+		"pt:icon:ghost": {},
+		"pt:icon:destructive": {},
+		"pt:icon:link": {},
+		"pt:spinner:primary": {},
+		"pt:spinner:outline": {},
+		"pt:spinner:secondary": {},
+		"pt:spinner:ghost": {},
+		"pt:spinner:destructive": {},
+		"pt:spinner:link": {},
+		"pt:text:primary": {},
+		"pt:text:outline": {},
+		"pt:text:secondary": {},
+		"pt:text:ghost": {},
+		"pt:text:destructive": {},
+		"pt:text:link": {},
 		pt: {},
 		disableAutoLoading: { type: Boolean },
 		activeClass: {},
@@ -106,43 +140,56 @@ var N = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(b, { expose: S }) {
-		let P = A(b, "modelValue"), F = b;
-		process.env.NODE_ENV !== "production" && i("BbButton", r("BbButton"));
-		let I = [
+	setup(n, { expose: x }) {
+		let C = ce(n, "modelValue"), F = n, I = le();
+		process.env.NODE_ENV !== "production" && ee("BbButton", i("BbButton"));
+		let L = [
 			"xs",
 			"sm",
 			"md",
 			"lg",
 			"xl",
 			"2xl"
-		], L = e(), R = _(() => P.value !== void 0), z = _(() => p(P.value, F.trueValue)), { t: B } = o(), V = k(), H = T();
-		process.env.NODE_ENV !== "production" && j(() => {
-			R.value || "aria-pressed" in V && L.warn("BbButton: `aria-pressed` is managed by the component and your binding is ignored. Bind `v-model` (with `true-value`/`false-value` when the state is not boolean) — that sets `aria-pressed`, applies `bb-button--pressed`, and flips the value on click.");
+		], R = e(), z = _(() => C.value !== void 0), B = _(() => f(C.value, F.trueValue)), { t: V } = s(), H = j(), U = D();
+		process.env.NODE_ENV !== "production" && M(() => {
+			z.value || "aria-pressed" in H && R.warn("BbButton: `aria-pressed` is managed by the component and your binding is ignored. Bind `v-model` (with `true-value`/`false-value` when the state is not boolean) — that sets `aria-pressed`, applies `bb-button--pressed`, and flips the value on click.");
 		});
-		let U = (e) => {
-			H.value = ee(e) ?? void 0;
-		}, W = _(() => {
-			let { onClick: e, class: t, ...n } = V;
+		let W = (e) => {
+			U.value = a(e) ?? void 0;
+		}, ue = _(() => {
+			let { onClick: e, class: t, ...n } = H;
 			return n;
-		}), G = T(0), K = x(a, null), q = () => F.type === "submit" && V.form != null ? String(V.form) : void 0, J = u(q), Y = () => F.type === "submit" && (q() ? J(H.value) : !!K?.savingFor(H.value)), X = _(() => F.loading || !F.disableAutoLoading && (!!G.value || Y())), ie = n(X), Z = t({
+		}), G = D(0), de = se(o, null), K = () => F.type === "submit" && H.form != null ? String(H.form) : void 0, fe = ie(K), pe = () => F.type === "submit" && (K() ? fe(U.value) : !!de?.savingFor(U.value)), q = _(() => F.loading || !F.disableAutoLoading && (!!G.value || pe())), me = r(q), J = re(F);
+		ne(J);
+		let Y = _(() => !!F.icon || !!I.icon), X = _(() => ({
+			...J.value,
+			pressed: z.value && B.value,
+			loading: q.value,
+			disabled: !!F.disabled
+		})), Z = t({
 			component: "BbButton",
-			attrs: V,
+			attrs: H,
 			props: F,
-			parts: m.parts,
-			states: m.states,
+			parts: p.parts,
+			states: p.states,
 			active: {
-				loading: () => X.value,
+				loading: () => q.value,
 				disabled: () => !!F.disabled,
-				pressed: () => R.value && z.value
+				pressed: () => z.value && B.value,
+				activeLink: () => J.value.activeLink,
+				exactActiveLink: () => J.value.exactActiveLink
+			},
+			variant: {
+				...p.variant,
+				current: () => F.variant
 			}
-		}), ae = async (e) => {
-			if (X.value && !F.interactiveWhileLoading) return (F.type === "submit" || F.href || F.to) && e.preventDefault(), null;
-			if (R.value) {
+		}), he = async (e) => {
+			if (q.value && !F.interactiveWhileLoading) return (F.type === "submit" || F.href || F.to) && e.preventDefault(), null;
+			if (z.value) {
 				let e = F.trueValue, t = F.falseValue;
-				P.value = p(P.value, e) ? t : e;
+				C.value = f(C.value, e) ? t : e;
 			}
-			let t = [V.onClick ?? f].flat(), n = t.map((t) => t(e)), r = n.filter((e) => e && typeof e.then == "function");
+			let t = [H.onClick ?? d].flat(), n = t.map((t) => t(e)), r = n.filter((e) => e && typeof e.then == "function");
 			if (!r.length) return n[0];
 			let i = t.length === 1 ? n[0] : Promise.all(r).then(() => {});
 			G.value++;
@@ -151,16 +198,16 @@ var N = {
 			} finally {
 				G.value--;
 			}
-		}, oe = _(() => {
+		}, ge = _(() => {
 			let e = typeof F.size == "string" ? { default: F.size } : {
 				default: "md",
 				...F.size
 			};
 			return Object.fromEntries(Object.entries(e).map(([e, t]) => {
 				let n = t;
-				return I.includes(t) || (L.warn(`Invalid size: "${t}" in BbButton. Expected one of: ${I.join(", ")}. Falling back to "md".`), n = "md"), [e === "default" ? `bb-button--${n}` : `bb-button--${e}-${n}`, !0];
+				return L.includes(t) || (R.warn(`Invalid size: "${t}" in BbButton. Expected one of: ${L.join(", ")}. Falling back to "md".`), n = "md"), [e === "default" ? `bb-button--${n}` : `bb-button--${e}-${n}`, !0];
 			}));
-		}), se = /* @__PURE__ */ new Set([
+		}), _e = /* @__PURE__ */ new Set([
 			"append:icon",
 			"disableAutoLoading",
 			"disabled",
@@ -174,72 +221,81 @@ var N = {
 			"size",
 			"trueValue",
 			"variant"
-		]), ce = _(() => ({
-			...W.value,
-			...d(F, (e, t) => !se.has(t) && t !== "pt" && !t.startsWith("pt:"))
-		})), Q = _(() => X.value && !F.interactiveWhileLoading), $ = h(H, _(() => !!F.group && R.value && !("tabindex" in V)), () => [
-			z.value,
+		]), ve = _(() => ({
+			...ue.value,
+			...u(F, (e, t) => !_e.has(t) && t !== "pt" && !t.startsWith("pt:"))
+		})), Q = _(() => q.value && !F.interactiveWhileLoading), $ = m(U, _(() => !!F.group && z.value && !("tabindex" in H)), () => [
+			B.value,
 			F.disabled,
 			Q.value
-		]), le = _(() => {
+		]), ye = _(() => {
 			let e = Q.value ? -1 : $.tabindex.value;
 			return {
 				...Q.value ? { "aria-disabled": !0 } : {},
 				...e === void 0 ? {} : { tabindex: e }
 			};
-		}), ue = _(() => C(ce.value, {
-			...le.value,
-			"aria-pressed": R.value ? z.value : void 0,
+		}), be = _(() => w(ve.value, {
+			...ye.value,
+			"aria-pressed": z.value ? B.value : void 0,
 			class: [
 				"bb-button",
-				oe.value,
+				ge.value,
 				{
-					"bb-button--loading": X.value,
+					"bb-button--loading": q.value,
 					"bb-button--soft-disabled": Q.value,
 					"bb-button--group": F.group,
-					"bb-button--icon": !!F.icon,
-					"bb-button--pressed": R.value && z.value,
+					"bb-button--icon": Y.value,
+					"bb-button--pressed": z.value && B.value,
 					[`bb-button--${F.variant}`]: F.variant !== "none"
 				}
 			],
 			disabled: F.disabled,
-			onClick: ae,
+			onClick: he,
 			onFocusin: $.onFocusin,
 			onKeydown: $.onKeydown
 		}, Z.root));
-		return S({ $el: H }), (e, t) => (w(), v(O(l), C({ ref: U }, ue.value), {
-			default: M(() => [
-				O(ie) ? (w(), v(g, {
+		return x({ $el: U }), (e, t) => (E(), v(A(l), w({ ref: W }, be.value), {
+			default: N(() => [
+				A(me) ? (E(), v(g, {
 					key: 0,
 					appear: "",
 					name: "bb-button-spinner"
 				}, {
-					default: M(() => [X.value ? (w(), v(O(c), C({
+					default: N(() => [q.value ? (E(), v(A(te), w({
 						key: 0,
 						class: "bb-button__spinner"
-					}, O(Z).spinner), null, 16)) : y("", !0)]),
+					}, A(Z).spinner), null, 16)) : y("", !0)]),
 					_: 1
 				})) : y("", !0),
-				F.icon ? (w(), v(s, C({
+				I.icon ? (E(), b("span", w({
 					key: 1,
+					class: "bb-button__icon bb-button__icon-slot"
+				}, A(Z).icon), [O(e.$slots, "icon", T(S(X.value)))], 16)) : F.icon ? (E(), v(c, w({
+					key: 2,
 					class: "bb-button__icon",
 					icon: F.icon
-				}, O(Z).icon), null, 16, ["icon"])) : F["prepend:icon"] ? (w(), v(s, C({
-					key: 2,
+				}, A(Z).icon), null, 16, ["icon"])) : I["prepend:icon"] ? (E(), b("span", w({
+					key: 3,
+					class: "bb-button__prepend-icon bb-button__icon-slot"
+				}, A(Z).icon), [O(e.$slots, "prepend:icon", T(S(X.value)))], 16)) : F["prepend:icon"] ? (E(), v(c, w({
+					key: 4,
 					class: "bb-button__prepend-icon",
 					icon: F["prepend:icon"]
-				}, O(Z).icon), null, 16, ["icon"])) : y("", !0),
-				ne("span", C({ class: ["bb-button__text", { "bb-sr-only": !!e.icon }] }, O(Z).text), [E(e.$slots, "default", {}, () => [re(D(e.text), 1)])], 16),
-				X.value ? (w(), te("span", N, D(O(B)("common.loadingText")), 1)) : y("", !0),
-				!e.icon && F["append:icon"] ? (w(), v(s, C({
-					key: 4,
+				}, A(Z).icon), null, 16, ["icon"])) : y("", !0),
+				ae("span", w({ class: ["bb-button__text", { "bb-sr-only": Y.value }] }, A(Z).text), [O(e.$slots, "default", T(S(A(J))), () => [oe(k(e.text), 1)])], 16),
+				q.value ? (E(), b("span", P, k(A(V)("common.loadingText")), 1)) : y("", !0),
+				Y.value ? y("", !0) : (E(), b(h, { key: 6 }, [I["append:icon"] ? (E(), b("span", w({
+					key: 0,
+					class: "bb-button__append-icon bb-button__icon-slot"
+				}, A(Z).icon), [O(e.$slots, "append:icon", T(S(X.value)))], 16)) : F["append:icon"] ? (E(), v(c, w({
+					key: 1,
 					class: "bb-button__append-icon",
 					icon: F["append:icon"]
-				}, O(Z).icon), null, 16, ["icon"])) : y("", !0)
+				}, A(Z).icon), null, 16, ["icon"])) : y("", !0)], 64))
 			]),
 			_: 3
 		}, 16));
 	}
 });
 //#endregion
-export { P as default };
+export { F as default };

package/dist/components/BbButton/types.d.ts

@@ -1,9 +1,10 @@
 import { RouteLocationRaw } from 'vue-router';
 import { ButtonTag } from '../../types/CommonProps';
 import { IconType } from '../../types/Icon';
-import { ButtonVariantType } from '../../types/ButtonVariant';
+import { ButtonVariantBuiltIn, ButtonVariantRegistry, ButtonVariantType } from '../../types/ButtonVariant';
 import { Responsive } from '../../types/ResponsiveSize';
-import { PtMap, PtValue } from '../../types/passthrough';
+import { PtMap, PtValue, PtVariantAttrs } from '../../types/passthrough';
+import { BbLinkSlotProps } from '../BbBaseButton/types';
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 /**
  * Passthrough parts of `BbButton` (plans/passthrough/BbButton.md).
@@ -26,31 +27,44 @@ type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type BbButtonPtPart = 'root' | 'icon' | 'spinner' | 'text';
 /**
  * Passthrough states of `BbButton`: true while `--loading` / `--disabled` /
- * `--pressed`. There is no `active` state (the pointer press is Tailwind's
- * `active:` variant) and no `current` state (a link to the current route is
- * `activeClass` / `exactActiveClass`).
+ * `--pressed`, and for a link while `activeClass` / `exactActiveClass` are on.
+ * There is no `active` state (the pointer press is Tailwind's `active:`
+ * variant). A link to the current page is `activeLink` / `exactActiveLink`,
+ * on every part: the sidebar entry of the page you are on styles its root,
+ * icon and text from them, and the default slot gets the same two booleans.
  *
+ * @state activeLink - Component-wide: a link to the current page or one of
+ *   its ancestors (`/users` on `/users/5`) — exactly when `activeClass` is on.
+ *   The weakest state: `pressed`, `disabled` and `loading` win a conflict.
+ * @state exactActiveLink - Component-wide: a link to the current page itself
+ *   — exactly when `exactActiveClass` is on (`activeLink` is on too, so its
+ *   entries apply first and these win).
  * @state disabled - Component-wide: the button is `disabled`.
  * @state loading - Component-wide: `loading` is on — the spinner shows and
  *   the button ignores the pointer.
  * @state pressed - Component-wide: a toggle button (`v-model`) is on —
  *   `aria-pressed="true"`, `--pressed` on the root.
  */
-export type BbButtonPtState = 'loading' | 'disabled' | 'pressed';
+export type BbButtonPtState = 'activeLink' | 'exactActiveLink' | 'loading' | 'disabled' | 'pressed';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export declare const BB_BUTTON_PT: {
     readonly parts: readonly ["root", "icon", "spinner", "text"];
-    readonly states: readonly ["pressed", "disabled", "loading"];
+    readonly states: readonly ["activeLink", "exactActiveLink", "pressed", "disabled", "loading"];
+    readonly variant: {
+        readonly names: readonly ["primary", "outline", "secondary", "ghost", "destructive", "link"];
+        readonly option: "buttonVariants";
+    };
 };
 export type BbButtonProps = {
-    [K in `pt:${BbButtonPtPart}` | `pt:${BbButtonPtPart}:${BbButtonPtState}`]?: PtValue;
-} & {
+    [K in `pt:${BbButtonPtPart}` | `pt:${BbButtonPtPart}:${BbButtonPtState}` | `pt:${BbButtonPtPart}:${ButtonVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<BbButtonPtPart, keyof ButtonVariantRegistry> & {
     /**
      * Passthrough, object form: `{ icon: '…', 'icon:loading': '…' }` — the same
      * keys as the `pt:*` attributes without the prefix. Parts: `root`, `icon`,
-     * `spinner`, `text`. States: `loading`, `disabled`.
+     * `spinner`, `text`. States: `loading`, `disabled`, `pressed`, and the
+     * registered variants (an app's own included).
      */
-    pt?: PtMap<BbButtonPtPart, BbButtonPtState>;
+    pt?: PtMap<BbButtonPtPart, BbButtonPtState | ButtonVariantBuiltIn | keyof ButtonVariantRegistry>;
 } & BbButtonOwnProps;
 /**
  * BbButton's props without its passthrough. `BbDropdownButton` takes them for
@@ -346,10 +360,33 @@ export type BbButtonOwnProps = {
      */
     viewTransition?: boolean;
 };
+/**
+ * What `#icon` / `#prepend:icon` / `#append:icon` see: the button's `pt`
+ * states, so a glyph can follow them (a filled icon on the current page's link).
+ */
+export type BbButtonIconSlotProps = BbLinkSlotProps & {
+    /** A toggle (`v-model`) that is on. */
+    pressed: boolean;
+    /** Loading, the automatic loading included: the spinner shows. */
+    loading: boolean;
+    /** The `disabled` prop. */
+    disabled: boolean;
+};
 export type BbButtonSlots = {
     /**
-     * Primary content rendered inside the button. Falls back to the `text` prop when empty.
+     * Primary content rendered inside the button. Falls back to the `text` prop
+     * when empty. A link's slot gets `{ activeLink, exactActiveLink }`: whether it
+     * points at the current page (both `false` on a button).
+     */
+    default?: (props: BbLinkSlotProps) => any;
+    /**
+     * The icon of an icon-only button, replacing the `icon` prop. Renders inside
+     * the `icon` part: `pt:icon`, `--icon-size` and the loading spinner apply.
      */
-    default?: (props: object) => any;
+    icon?: (props: BbButtonIconSlotProps) => any;
+    /** The leading icon, replacing `prepend:icon`; inside the `icon` part. */
+    'prepend:icon'?: (props: BbButtonIconSlotProps) => any;
+    /** The trailing icon, replacing `append:icon`; inside the `icon` part. */
+    'append:icon'?: (props: BbButtonIconSlotProps) => any;
 };
 export {};

package/dist/components/BbButton/types.js

@@ -1,5 +1,6 @@
+import { BUTTON_VARIANTS as e } from "../../types/ButtonVariant.js";
 //#region src/components/BbButton/types.ts
-var e = {
+var t = {
 	parts: [
 		"root",
 		"icon",
@@ -7,10 +8,16 @@ var e = {
 		"text"
 	],
 	states: [
+		"activeLink",
+		"exactActiveLink",
 		"pressed",
 		"disabled",
 		"loading"
-	]
+	],
+	variant: {
+		names: e,
+		option: "buttonVariants"
+	}
 };
 //#endregion
-export { e as BB_BUTTON_PT };
+export { t as BB_BUTTON_PT };