bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/scripts/lib/html-attributes.mjs

@@ -189,3 +189,94 @@ export function isFallthroughAttr(name) {
 		HTML_ATTRIBUTES.has(lower)
 	);
 }
+
+/**
+ * DOM events a consumer may legitimately listen for on a `Bb*` component and
+ * expect to reach its root element through Vue's listener fall-through.
+ *
+ * The event gate needs this for the same reason the attribute gate needs
+ * `HTML_ATTRIBUTES`: a component's manifest lists only the events it EMITS, so
+ * `@click` on `BbButton` — which declares just `update:modelValue` — is
+ * perfectly good markup that would otherwise read as a typo. Anything here is
+ * accepted on any component without consulting the manifest.
+ *
+ * Deliberately not exhaustive over the whole DOM: media, sensor and
+ * legacy-IE events are omitted until something needs them, because every name
+ * added here is a name the gate stops checking.
+ */
+export const NATIVE_DOM_EVENTS = new Set([
+	// pointer / mouse
+	'auxclick',
+	'click',
+	'contextmenu',
+	'dblclick',
+	'mousedown',
+	'mouseenter',
+	'mouseleave',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup',
+	'wheel',
+	'pointercancel',
+	'pointerdown',
+	'pointerenter',
+	'pointerleave',
+	'pointermove',
+	'pointerout',
+	'pointerover',
+	'pointerup',
+	// touch
+	'touchcancel',
+	'touchend',
+	'touchmove',
+	'touchstart',
+	// keyboard
+	'keydown',
+	'keypress',
+	'keyup',
+	// focus
+	'blur',
+	'focus',
+	'focusin',
+	'focusout',
+	// form
+	'beforeinput',
+	'change',
+	'input',
+	'invalid',
+	'reset',
+	'search',
+	'select',
+	'submit',
+	// clipboard + composition
+	'copy',
+	'cut',
+	'paste',
+	'compositionend',
+	'compositionstart',
+	'compositionupdate',
+	// drag and drop
+	'drag',
+	'dragend',
+	'dragenter',
+	'dragleave',
+	'dragover',
+	'dragstart',
+	'drop',
+	// scroll / resize / visibility
+	'error',
+	'load',
+	'scroll',
+	'scrollend',
+	'toggle',
+	// animation
+	'animationcancel',
+	'animationend',
+	'animationiteration',
+	'animationstart',
+	'transitioncancel',
+	'transitionend',
+	'transitionrun',
+	'transitionstart',
+]);

package/scripts/lib/validate-bb-markup.mjs

@@ -17,7 +17,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parse } from 'vue/compiler-sfc';
-import { isFallthroughAttr } from './html-attributes.mjs';
+import { isFallthroughAttr, NATIVE_DOM_EVENTS } from './html-attributes.mjs';
 
 const HERE = dirname(fileURLToPath(import.meta.url));
 const DEFAULT_MANIFEST = join(HERE, '../../dist/ai/components.json');
@@ -286,7 +286,7 @@ const INTENT_ALIASES = {
  * @typedef {{ name: string, new?: string | null, since?: string, migration?: string, silent?: boolean }} RemovedEntry
  * @typedef {{ name: string, props: Array<{ name: string }>, models: Array<{ name: string }>, referenceOnly?: boolean, removed?: RemovedEntry[], renamed?: Array<{ from: string, to: string }> }} ComponentSurface
  * @typedef {Map<string, ComponentSurface>} ManifestMap
- * @typedef {{ component: string, attr: string, line?: number, kind: 'unknown-prop' | 'unknown-model' | 'removed-prop' | 'unknown-slot', message: string, hint?: string }} Finding
+ * @typedef {{ component: string, attr: string, line?: number, kind: 'unknown-prop' | 'unknown-model' | 'removed-prop' | 'unknown-slot' | 'unknown-event', message: string, hint?: string }} Finding
  */
 
 /**
@@ -401,7 +401,7 @@ export function validateVueSnippet(code, manifest, options = {}) {
 }
 
 /**
- * @typedef {{ attr: string, kind: 'unknown-prop' | 'unknown-model' | 'removed-prop' | 'unknown-slot', message: string, hint?: string }} AttrFinding
+ * @typedef {{ attr: string, kind: 'unknown-prop' | 'unknown-model' | 'removed-prop' | 'unknown-slot' | 'unknown-event', message: string, hint?: string }} AttrFinding
  */
 
 /**
@@ -663,6 +663,53 @@ export function createComponentChecker(surface, options = {}) {
 			if (declaredList.length === 0) return false;
 			return !declaredList.some((s) => s.name === 'default');
 		},
+		/**
+		 * Q10.12 — an `@event` on a `Bb*` tag must name something real.
+		 *
+		 * Nothing checked these. The beta.9 rename `resize` → `resize:column`
+		 * left our own `examples/ResizableColumns.vue` on `@resize` and every
+		 * gate stayed green: doc-drift skips `@event` in prose by design, the
+		 * ESLint rule reads attributes and props only, and `vue-tsc` reports
+		 * unknown component events only under `strictTemplates`. A consumer's
+		 * migration report found it.
+		 *
+		 * Accepted without consulting the manifest: any NATIVE DOM event, since
+		 * Vue passes an undeclared listener through to the root element —
+		 * `@click` on BbButton is good markup even though BbButton emits only
+		 * `update:modelValue`.
+		 *
+		 * Silent when the component declares no events at all: that is true of
+		 * reference-only surfaces and of anything whose manifest entry predates
+		 * event extraction, and guessing there would cry wolf — the same guard
+		 * `checkSlot` uses.
+		 */
+		checkEvent(rawName) {
+			if (!rawName) return null;
+			// `@click.stop.prevent` → `click`. Modifiers are Vue's, not ours.
+			const name = rawName.split('.')[0];
+			if (!name) return null;
+			if (NATIVE_DOM_EVENTS.has(name)) return null;
+
+			const declaredList = surface.events ?? [];
+			if (declaredList.length === 0) return null;
+			const declared = new Set(declaredList.map((e) => e.name));
+			if (declared.has(name)) return null;
+
+			// `update:foo` for a real model, in case a surface lists models but
+			// not their update events.
+			if (name.startsWith('update:') && modelKeys.has(toCamel(name.slice(7))))
+				return null;
+
+			const near = nearestName(name, declared);
+			return {
+				attr: `@${rawName}`,
+				kind: 'unknown-event',
+				message: `event \`${name}\` is not emitted by ${surface.name}`,
+				hint: near
+					? `did you mean \`@${near}\`?`
+					: `emitted events: ${[...declared].sort().join(', ')}`,
+			};
+		},
 		checkSlot(rawName) {
 			if (!rawName) return null;
 
@@ -837,13 +884,6 @@ export function checkNavAttrFallthrough(manifest, name, attrName) {
  * `check` alone shipped orphan slots believing the markup was clean (SWP-015).
  */
 export const TABLE_SLOT_PROP_PAIRS = [
-	{
-		slot: 'actions',
-		prop: 'actions',
-		missing: 'the `actions` prop is not set',
-		explain: 'the actions cell — and this slot — never renders',
-		action: 'Set the `actions` prop',
-	},
 	{
 		slot: 'select',
 		prop: 'selectable',
@@ -1137,7 +1177,15 @@ function validateElement(node, manifest, findings) {
 					findings.push({ component: name, ...finding, line: propLine(prop) });
 				continue;
 			}
-			if (prop.name !== 'bind') continue; // @events, v-if/for/show/slot, …
+			if (prop.name === 'on') {
+				// Dynamic handler name (`@[evt]`) cannot be checked statically.
+				if (!prop.arg || !prop.arg.isStatic) continue;
+				const finding = checker.checkEvent(prop.arg.content);
+				if (finding)
+					findings.push({ component: name, ...finding, line: propLine(prop) });
+				continue;
+			}
+			if (prop.name !== 'bind') continue; // v-if/for/show/slot, …
 			if (!prop.arg || !prop.arg.isStatic) continue; // v-bind="obj", :[dyn]
 			const finding =
 				checker.checkAttr(prop.arg.content) ??

package/dist/assets/svgs/sort.svg_raw.js

@@ -1,4 +0,0 @@
-//#region src/assets/svgs/sort.svg?raw
-var e = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\">\n	<path d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path class=\"sort-icon__asc\" fill=\"currentColor\" d=\"M6.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414V19a1 1 0 1 1-2 0V7.414L3.707 9.707a1 1 0 0 1-1.414-1.414z\" />\n	<path class=\"sort-icon__desc\" fill=\"currentColor\" d=\"M16 16.586V5a1 1 0 1 1 2 0v11.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414z\" />\n</svg>\n";
-//#endregion
-export { e as default };

package/dist/components/BbBadge/BadgeAppendIcon.vue.d.ts

@@ -1,3 +0,0 @@
-declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/BbBadge/BadgeAppendIcon.vue.js

@@ -1,5 +0,0 @@
-import e from "./BadgeAppendIcon.vue_vue_type_script_setup_true_lang.js";
-//#region src/components/BbBadge/BadgeAppendIcon.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/components/BbBadge/BadgeAppendIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +0,0 @@
-import { useLogger as e } from "../../composables/useLogger.js";
-import t from "../BbIcon/BbIcon.vue.js";
-import n from "../BbSpinner/BbSpinner.vue.js";
-import { useBadgeHost as r } from "./badgeButtonContext.js";
-import { createBlock as i, createCommentVNode as a, defineComponent as o, openBlock as s, unref as c } from "vue";
-//#region src/components/BbBadge/BadgeAppendIcon.vue?vue&type=script&setup=true&lang.ts
-var l = /*@__PURE__*/ o({
-	__name: "BadgeAppendIcon",
-	setup(o) {
-		let l = r() ?? e().throw("[BbBadge] internal append renderer mounted outside a badge — this is a bug.");
-		return (e, r) => c(l).spinnerTrails.value ? (s(), i(n, {
-			key: 0,
-			class: "bb-badge__append-icon"
-		})) : c(l).appendIcon.value ? (s(), i(t, {
-			key: 1,
-			class: "bb-badge__append-icon",
-			icon: c(l).appendIcon.value
-		}, null, 8, ["icon"])) : a("", !0);
-	}
-});
-//#endregion
-export { l as default };