@chelone/vue 0.9.0 → 0.10.0

package/dist/components/admin/layout/data-provider-devtools.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,26 @@
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { cn } from "../../../lib/utils.js";
 import button_default from "../../ui/button.js";
+import { buttonVariants } from "../../ui/button-variants.js";
 import data_provider_devtools_entry_default from "./data-provider-devtools-entry.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { ActivityIcon } from "./icons.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
 import { shouldHandleHotkey } from "@chelone/core";
 // src/components/admin/layout/data-provider-devtools.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label", "data-open"];
-var _hoisted_2 = ["data-open"];
-var _hoisted_3 = { class: "font-semibold" };
-var _hoisted_4 = { class: "text-muted-foreground tabular-nums" };
-var _hoisted_5 = {
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	"data-slot": "data-provider-devtools-badge",
+	class: "absolute top-0 right-0 min-w-4 -translate-y-1/2 translate-x-1/2 rounded-full bg-primary px-1 text-center text-[10px] leading-4 text-primary-foreground tabular-nums"
+};
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = { class: "flex items-center gap-2 border-b px-3 py-1.5" };
+var _hoisted_5 = { class: "font-semibold" };
+var _hoisted_6 = { class: "text-muted-foreground tabular-nums" };
+var _hoisted_7 = {
 	key: 0,
 	class: "px-3 py-2 text-muted-foreground"
 };
-var _hoisted_6 = {
+var _hoisted_8 = {
 	key: 1,
 	class: "min-h-0 flex-1 overflow-y-auto"
 };
@@ -30,11 +37,13 @@ var data_provider_devtools_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	},
 	setup(__props) {
 		/**
-		* `<DataProviderDevtools>` — a floating panel at the bottom right that lists
-		* the calls a `createDataProviderLog` log has recorded: method, resource,
-		* duration and, for a failed call, the error. The Vue twin of
+		* `<DataProviderDevtools>` — a round button at the bottom right carrying a
+		* badge with the number of calls a `createDataProviderLog` log has recorded.
+		* Activating it opens a panel listing those calls: method, resource, duration
+		* and, for a failed call, the error. The panel's Hide button, or the
+		* `shortcut`, closes it back to the button. The Vue twin of
 		* `@chelone/react`'s `layout/data-provider-devtools.tsx`. Wrap the data
-		* provider with `log.wrap`, then mount the panel once, in the layout.
+		* provider with `log.wrap`, then mount the component once, in the layout.
 		*/
 		const props = __props;
 		const translate = useTranslate();
@@ -48,6 +57,7 @@ var data_provider_devtools_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			}));
 		}, { immediate: true });
 		const entries = computed(() => [...snapshot.value.entries].reverse());
+		const title = () => translate("chelone.devtools.title", { _: "Data provider" });
 		function onKeydown(event) {
 			const target = event.target instanceof HTMLElement ? event.target : null;
 			if (!shouldHandleHotkey(event, props.shortcut, target)) return;
@@ -56,24 +66,48 @@ var data_provider_devtools_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 		onMounted(() => window.addEventListener("keydown", onKeydown));
 		onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+		const triggerRef = ref(null);
+		const panelRef = ref(null);
+		watch(open, (opened) => {
+			nextTick(() => {
+				const focused = document.activeElement;
+				if (focused !== null && focused !== document.body && focused.isConnected) return;
+				(opened ? panelRef : triggerRef).value?.focus();
+			});
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", {
-				"aria-label": unref(translate)("chelone.devtools.title", { _: "Data provider" }),
+			return !open.value ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				ref_key: "triggerRef",
+				ref: triggerRef,
+				type: "button",
+				"aria-expanded": false,
+				"aria-label": `${title()} (${snapshot.value.entries.length})`,
+				"data-slot": "data-provider-devtools",
+				"data-open": false,
+				class: normalizeClass(unref(cn)(unref(buttonVariants)({
+					variant: "outline",
+					size: "icon"
+				}), "fixed right-4 bottom-4 z-50 rounded-full shadow-lg", props.class)),
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = true)
+			}, [createVNode(unref(ActivityIcon)), createElementVNode("span", _hoisted_2, toDisplayString(snapshot.value.entries.length), 1)], 10, _hoisted_1)) : (openBlock(), createElementBlock("section", {
+				key: 1,
+				ref_key: "panelRef",
+				ref: panelRef,
+				tabindex: "-1",
+				"aria-label": title(),
 				"data-slot": "data-provider-devtools",
-				"data-open": open.value,
+				"data-open": true,
 				class: normalizeClass(unref(cn)("fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 max-w-[calc(100vw-2rem)] flex-col rounded-lg border bg-popover text-xs text-popover-foreground shadow-lg", props.class))
-			}, [createElementVNode("header", {
-				class: "flex items-center gap-2 border-b px-3 py-1.5 data-[open=false]:border-b-0",
-				"data-open": open.value
-			}, [
-				createElementVNode("span", _hoisted_3, toDisplayString(unref(translate)("chelone.devtools.title", { _: "Data provider" })), 1),
-				createElementVNode("span", _hoisted_4, toDisplayString(snapshot.value.entries.length), 1),
+			}, [createElementVNode("header", _hoisted_4, [
+				createElementVNode("span", _hoisted_5, toDisplayString(title()), 1),
+				createElementVNode("span", _hoisted_6, toDisplayString(snapshot.value.entries.length), 1),
 				createVNode(button_default, {
 					type: "button",
 					variant: "ghost",
 					size: "sm",
 					class: "ml-auto h-6 px-2",
-					onClick: _cache[0] || (_cache[0] = ($event) => props.log.clear())
+					onClick: _cache[1] || (_cache[1] = ($event) => props.log.clear())
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.devtools.clear", { _: "Clear" })), 1)]),
 					_: 1
@@ -83,18 +117,18 @@ var data_provider_devtools_vue_vue_type_script_setup_true_lang_default = /*@__PU
 					variant: "ghost",
 					size: "sm",
 					class: "h-6 px-2",
-					"aria-expanded": open.value,
-					onClick: _cache[1] || (_cache[1] = ($event) => open.value = !open.value)
+					"aria-expanded": true,
+					onClick: _cache[2] || (_cache[2] = ($event) => open.value = false)
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(open.value ? unref(translate)("chelone.devtools.hide", { _: "Hide" }) : unref(translate)("chelone.devtools.show", { _: "Show" })), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.devtools.hide", { _: "Hide" })), 1)]),
 					_: 1
-				}, 8, ["aria-expanded"])
-			], 8, _hoisted_2), open.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [entries.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(translate)("chelone.devtools.empty", { _: "No calls yet" })), 1)) : (openBlock(), createElementBlock("ul", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
+				})
+			]), entries.value.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(translate)("chelone.devtools.empty", { _: "No calls yet" })), 1)) : (openBlock(), createElementBlock("ul", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
 				return openBlock(), createBlock(data_provider_devtools_entry_default, {
 					key: entry.id,
 					entry
 				}, null, 8, ["entry"]);
-			}), 128))]))], 64)) : createCommentVNode("", true)], 10, _hoisted_1);
+			}), 128))]))], 10, _hoisted_3));
 		};
 	}
 });

package/dist/components/admin/layout/icons.d.ts

@@ -20,3 +20,5 @@ export declare const SendIcon: FunctionalComponent;
 export declare const SquareIcon: FunctionalComponent;
 /** The assistant close glyph (a cross). */
 export declare const XIcon: FunctionalComponent;
+/** The data provider devtools trigger glyph (a pulse line). */
+export declare const ActivityIcon: FunctionalComponent;

package/dist/components/admin/layout/icons.js

@@ -38,4 +38,6 @@ var SendIcon = glyph(["M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0
 var SquareIcon = glyph(["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"]);
 /** The assistant close glyph (a cross). */
 var XIcon = glyph(["M18 6 6 18", "m6 6 12 12"]);
-export { HouseIcon, ListIcon, LogOutIcon, MessageCircleIcon, SendIcon, SquareIcon, XIcon };
+/** The data provider devtools trigger glyph (a pulse line). */
+var ActivityIcon = glyph(["M22 12h-4l-3 9L9 3l-3 9H2"]);
+export { ActivityIcon, HouseIcon, ListIcon, LogOutIcon, MessageCircleIcon, SendIcon, SquareIcon, XIcon };

package/dist/components/admin/realtime/menu-live.vue.d.ts

@@ -22,7 +22,9 @@ export interface MenuLiveProps {
 /**
  * A menu link with a badge counting the resource's new records. The count
  * lives in the store, so it survives a remount; it clears while the link's
- * route is active. Divergence from the React twin: the render props are slots.
+ * route is active. Inside a `<SidebarProvider>` it is a sidebar menu button,
+ * with the label as a `title` while the desktop rail is collapsed; elsewhere it is
+ * a plain link. Divergence from the React twin: the render props are slots.
  * Declared as a render component so the file can also hold {@link MenuLive}.
  */
 export declare const MenuLiveItemLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/components/admin/realtime/menu-live.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,17 @@ import { useCheloneContext, useCheloneStore } from "../../../context.js";
 import { useTranslate } from "../../../i18n/use-translate.js";
 import { useMatch } from "../../../router/nav-composables.js";
 import { Badge } from "../../ui/badge.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, h, mergeProps, openBlock, renderList, shallowRef, unref, watchEffect } from "vue";
+import { SidebarContextKey } from "../../ui/sidebar/sidebar-context.js";
+import sidebar_menu_button_default from "../../ui/sidebar/sidebar-menu-button.js";
+import { SidebarMenuItem } from "../../ui/sidebar/sidebar-parts.js";
+import { Fragment, computed, createBlock, createElementBlock, defineComponent, h, inject, mergeProps, openBlock, renderList, shallowRef, unref, watchEffect } from "vue";
 import { assertRealtimeDataProvider, clearUnread, subscribeUnreadCount, unreadKey } from "@chelone/core";
 import { RouterLink } from "vue-router";
 // src/components/admin/realtime/menu-live.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex flex-col gap-1" };
+var _hoisted_1 = {
+	key: 1,
+	class: "flex flex-col gap-1"
+};
 var subscriptions = /* @__PURE__ */ new WeakMap();
 var toEventsKey = (events) => [...new Set(events)].sort().join(",");
 var fromEventsKey = (eventsKey) => eventsKey.split(",").filter(Boolean);
@@ -51,7 +57,9 @@ function acquire(dataProvider, store, resource, eventsKey) {
 /**
 * A menu link with a badge counting the resource's new records. The count
 * lives in the store, so it survives a remount; it clears while the link's
-* route is active. Divergence from the React twin: the render props are slots.
+* route is active. Inside a `<SidebarProvider>` it is a sidebar menu button,
+* with the label as a `title` while the desktop rail is collapsed; elsewhere it is
+* a plain link. Divergence from the React twin: the render props are slots.
 * Declared as a render component so the file can also hold {@link MenuLive}.
 */
 var MenuLiveItemLink = defineComponent({
@@ -86,6 +94,7 @@ var MenuLiveItemLink = defineComponent({
 		const { dataProvider } = useCheloneContext();
 		const store = useCheloneStore();
 		const translate = useTranslate();
+		const sidebar = inject(SidebarContextKey, null);
 		const match = useMatch({
 			path: props.to,
 			end: false
@@ -111,15 +120,30 @@ var MenuLiveItemLink = defineComponent({
 		return () => {
 			const n = count.value ?? 0;
 			const text = translate(props.label, { _: props.label });
-			return h(RouterLink, {
-				to: props.to,
-				class: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent"
-			}, () => [
+			const badge = n > 0 ? h(Badge, {
+				"data-testid": "menu-live-badge",
+				class: sidebar ? "group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:top-0 group-data-[collapsible=icon]:right-0 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:px-1 group-data-[collapsible=icon]:text-[10px]" : void 0
+			}, () => props.badgeLabel?.(n) ?? (n > 99 ? "99+" : String(n))) : null;
+			const content = () => [
 				props.icon ? h(props.icon) : null,
 				slots.icon?.(),
 				h("span", { class: "flex-1" }, text),
-				n > 0 ? h(Badge, { "data-testid": "menu-live-badge" }, () => props.badgeLabel?.(n) ?? (n > 99 ? "99+" : String(n))) : null
-			]);
+				badge
+			];
+			if (sidebar) return h(SidebarMenuItem, null, () => h(sidebar_menu_button_default, {
+				as: RouterLink,
+				to: props.to,
+				isActive: match.value != null,
+				class: "relative",
+				title: sidebar.state.value === "collapsed" && !sidebar.isMobile.value ? text : void 0,
+				onClick: () => {
+					if (sidebar.openMobile.value) sidebar.setOpenMobile(false);
+				}
+			}, content));
+			return h(RouterLink, {
+				to: props.to,
+				class: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent"
+			}, content);
 		};
 	}
 });
@@ -128,12 +152,18 @@ var menu_live_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	props: { items: {} },
 	setup(__props) {
 		/**
-		* `<MenuLive>` — a list of {@link MenuLiveItemLink}s, one per item.
+		* `<MenuLive>` — a list of {@link MenuLiveItemLink}s, one per item. Inside a
+		* sidebar it renders the items as sidebar menu entries with no wrapper, so
+		* place it in a `<SidebarMenu>`, such as a `<ResourceMenuItemGroup>`'s default
+		* slot.
 		*/
+		const sidebar = inject(SidebarContextKey, null);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+			return unref(sidebar) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.items, (item) => {
+				return openBlock(), createBlock(unref(MenuLiveItemLink), mergeProps({ key: item.to }, { ref_for: true }, item), null, 16);
+			}), 128)) : (openBlock(), createElementBlock("nav", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createBlock(unref(MenuLiveItemLink), mergeProps({ key: item.to }, { ref_for: true }, item), null, 16);
-			}), 128))]);
+			}), 128))]));
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chelone/vue",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -76,14 +76,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@chelone/core": "0.9.0",
-    "@chelone/utils": "0.9.0",
+    "@chelone/core": "0.10.0",
+    "@chelone/utils": "0.10.0",
     "@types/geojson": "^7946.0.16",
     "cronstrue": "^3.38.0",
     "libphonenumber-js": "^1.13.15"
   },
   "peerDependencies": {
-    "@chelone/supabase": "0.9.0",
+    "@chelone/supabase": "0.10.0",
     "@dnd-kit/dom": "^0.5.3",
     "@dnd-kit/vue": "^0.5.3",
     "@guolao/vue-monaco-editor": "^1.6.0",
@@ -219,7 +219,7 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
-    "@chelone/supabase": "0.9.0",
+    "@chelone/supabase": "0.10.0",
     "@chelone/test-utils": "0.0.0",
     "@dnd-kit/dom": "^0.5.3",
     "@dnd-kit/vue": "^0.5.3",