@chelone/vue 0.6.0 → 0.7.0

package/dist/components/admin/view/labeled.vue.d.ts

@@ -28,7 +28,9 @@ export interface LabeledProps {
     as?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: PropType<string | false>;
         default: undefined;
@@ -97,13 +99,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    source: string;
     class: string;
     label: string | false;
-    source: string;
-    resource: string;
     htmlFor: string;
+    resource: string;
+    as: string;
     isRequired: boolean;
     fullWidth: boolean;
-    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/admin/view/labeled.vue_vue_type_script_lang.js

@@ -0,0 +1,74 @@
+import { cn } from "../../../lib/utils.js";
+import { childVNodes } from "../../../lib/vnode-children.js";
+import field_label_text_default from "../common/field-label-text.js";
+import record_field_default from "../fields/record-field.js";
+import { Comment, Fragment, defineComponent, getCurrentInstance, h } from "vue";
+// src/components/admin/view/labeled.vue?vue&type=script&lang.ts
+/** The first real vnode of the slot, looking through fragments (`v-for`). */
+function firstNode(nodes) {
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		if (node.type === Fragment) {
+			const inner = firstNode(childVNodes(node));
+			if (inner) return inner;
+		} else return node;
+	}
+}
+var labeled_vue_vue_type_script_lang_default = defineComponent({
+	name: "Labeled",
+	props: {
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		source: {
+			type: String,
+			default: void 0
+		},
+		resource: {
+			type: String,
+			default: void 0
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		htmlFor: {
+			type: String,
+			default: void 0
+		},
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		as: {
+			type: String,
+			default: "div"
+		},
+		class: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const self = getCurrentInstance()?.type;
+		return () => {
+			const child = firstNode(slots.default?.() ?? []);
+			const childProps = child?.props ?? {};
+			const showLabel = !(child != null && (typeof child.type === "string" || typeof child.type === "symbol" || child.type === record_field_default || child.type === self)) && props.label !== false && childProps.label !== false;
+			return h(props.as, {
+				"data-slot": "labeled",
+				class: cn("flex flex-col gap-1", props.fullWidth && "w-full", props.class)
+			}, [showLabel ? h("label", {
+				for: props.htmlFor,
+				class: "text-xs text-muted-foreground"
+			}, h(field_label_text_default, {
+				label: props.label ?? childProps.label,
+				source: props.source ?? childProps.source,
+				resource: props.resource ?? childProps.resource,
+				isRequired: props.isRequired
+			})) : null, slots.default?.()]);
+		};
+	}
+});
+export { labeled_vue_vue_type_script_lang_default as default };

package/dist/components/admin/view/list.js

@@ -0,0 +1,4 @@
+import list_vue_vue_type_script_setup_true_lang_default from "./list.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/view/list.vue
+var list_default = list_vue_vue_type_script_setup_true_lang_default;
+export { list_default as default };

package/dist/components/admin/view/list.vue.d.ts

@@ -4,12 +4,13 @@ export interface ListProps {
     perPage?: number;
     title?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     actions?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/view/list.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { useListController } from "../../../controllers/use-list-controller.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetResourceLabel } from "../../../label/use-get-resource-label.js";
+import { provideListContext } from "../../../list/list-context.js";
+import { provideResourceContext, useResourceContext } from "../../../resource-context.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
+// src/components/admin/view/list.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-slot": "list" };
+var _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+var _hoisted_3 = {
+	key: 0,
+	class: "text-2xl font-bold tracking-tight mb-2"
+};
+var _hoisted_4 = { class: "flex items-center gap-2" };
+var list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "list",
+	props: {
+		resource: {},
+		perPage: {},
+		title: {}
+	},
+	setup(__props) {
+		/**
+		* `<List>` — a list page, the Vue analog of `@chelone/react`'s `views/list.tsx`.
+		* Runs `useListController` for the resource and publishes the result into the
+		* `ListContext` so a descendant `<DataTable>` reads the SAME controller. Also
+		* (re)publishes the resource name so slotted fields/columns resolve it.
+		*
+		* Resource resolution: the `resource` prop wins, else the ambient `<Resource>`
+		* name. The controller is given the resolved name explicitly (a component's own
+		* `provide` is not visible to its own `inject`), while `provideResourceContext`
+		* exposes it to the CHILDREN (fields/columns).
+		*/
+		const props = __props;
+		const resource = props.resource ?? useResourceContext();
+		if (!resource) throw new Error("<List>: no resource. Pass a `resource` prop or render inside a <Resource>.");
+		provideResourceContext(resource);
+		const controller = useListController({
+			resource,
+			perPage: props.perPage
+		});
+		provideListContext(controller);
+		const translate = useTranslate();
+		const getResourceLabel = useGetResourceLabel();
+		const defaultTitle = computed(() => translate("ra.page.list", { name: getResourceLabel(resource, 2) }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [__props.title !== "" ? (openBlock(), createElementBlock("h2", _hoisted_3, toDisplayString(__props.title ?? defaultTitle.value), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "actions")])]), renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+export { list_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/view/show.js

@@ -0,0 +1,4 @@
+import show_vue_vue_type_script_setup_true_lang_default from "./show.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/view/show.vue
+var show_default = show_vue_vue_type_script_setup_true_lang_default;
+export { show_default as default };

package/dist/components/admin/view/show.vue.d.ts

@@ -19,12 +19,13 @@ export interface ShowProps {
     id?: Identifier;
     title?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ShowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ShowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ShowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ShowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     actions?: (props: {}) => any;
 } & {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/view/show.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import { useShowController } from "../../../controllers/use-show-controller.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { provideRecordContext } from "../../../record/record-context.js";
+import { provideResourceContext, useResourceContext } from "../../../resource-context.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref } from "vue";
+// src/components/admin/view/show.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-slot": "show" };
+var _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+var _hoisted_3 = {
+	key: 0,
+	class: "text-2xl font-bold tracking-tight"
+};
+var _hoisted_4 = {
+	key: 0,
+	class: "my-2"
+};
+var show_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "show",
+	props: {
+		resource: {},
+		id: {},
+		title: {}
+	},
+	setup(__props) {
+		/**
+		* `<Show>` — a read-only detail page, the Vue analog of `@chelone/react`'s
+		* `views/show.tsx`. Mirrors the `<Edit>`/`<Create>` structure minus the form:
+		* runs `useShowController` (Task-1 — fetches the record, no `save`), publishes
+		* the record into `RecordContext` so slotted display fields resolve it, and
+		* renders a title + actions slot + the default slot (the fields). The record
+		* hydrates asynchronously, so — like `<Edit>` — the body only renders once the
+		* record has landed (a bare field would otherwise flash its empty state).
+		*
+		* Resource + id resolution mirror `<Edit>`: the `resource` prop wins over the
+		* ambient `<Resource>` name; the `id` prop wins over the ambient `:id` route
+		* param (resolved inside the controller). Show never mutates, so there is no
+		* form provider / redirect wiring.
+		*/
+		const props = __props;
+		const resource = props.resource ?? useResourceContext();
+		if (!resource) throw new Error("<Show>: no resource. Pass a `resource` prop or render inside a <Resource>.");
+		provideResourceContext(resource);
+		const show = useShowController({
+			resource,
+			id: props.id
+		});
+		const getRecordRepresentation = useGetRecordRepresentation(resource);
+		const defaultTitle = computed(() => getRecordRepresentation(show.record));
+		provideRecordContext(computed(() => show.record));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [__props.title !== "" ? (openBlock(), createElementBlock("h2", _hoisted_3, toDisplayString(__props.title ?? defaultTitle.value), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "actions")]), unref(show).record ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]);
+		};
+	}
+});
+export { show_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/view/tabbed-show-layout-tab.js

@@ -0,0 +1,4 @@
+import tabbed_show_layout_tab_vue_vue_type_script_lang_default, { TabbedShowLayoutContextKey } from "./tabbed-show-layout-tab.vue_vue_type_script_lang.js";
+// src/components/admin/view/tabbed-show-layout-tab.vue
+var tabbed_show_layout_tab_default = tabbed_show_layout_tab_vue_vue_type_script_lang_default;
+export { TabbedShowLayoutContextKey, tabbed_show_layout_tab_default as default };

package/dist/components/admin/view/tabbed-show-layout-tab.vue.d.ts

@@ -30,7 +30,9 @@ export interface TabbedShowLayoutContext {
     divider?: () => VNodeChild;
 }
 export declare const TabbedShowLayoutContextKey: InjectionKey<TabbedShowLayoutContext>;
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
         required: true;
@@ -75,9 +77,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    count: number;
     icon: Component;
     path: string;
-    count: number;
     contentClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/admin/view/tabbed-show-layout-tab.vue_vue_type_script_lang.js

@@ -0,0 +1,58 @@
+import { cn } from "../../../lib/utils.js";
+import { childVNodes } from "../../../lib/vnode-children.js";
+import labeled_default from "./labeled.js";
+import { Comment, Fragment, Text, defineComponent, h, inject } from "vue";
+// src/components/admin/view/tabbed-show-layout-tab.vue?vue&type=script&lang.ts
+/**
+* `<TabbedShowLayoutTab>` — one tab of a `<TabbedShowLayout>`, the Vue twin of
+* `@chelone/react`'s `ShowTab`. The layout reads its props from the vnode to
+* draw the tab list and renders only the active tab, which wraps each element
+* of its default slot in a `<Labeled>`. Written as a render function because
+* the fields are read as vnodes, which a template cannot do.
+*/
+var TabbedShowLayoutContextKey = Symbol("chelone-tabbed-show-layout");
+/** The element vnodes of a slot, looking through fragments (`v-for`). */
+function elementNodes(nodes, out = []) {
+	for (const node of nodes) {
+		if (node.type === Comment || node.type === Text) continue;
+		if (node.type === Fragment) elementNodes(childVNodes(node), out);
+		else out.push(node);
+	}
+	return out;
+}
+var tabbed_show_layout_tab_vue_vue_type_script_lang_default = defineComponent({
+	name: "TabbedShowLayoutTab",
+	props: {
+		label: {
+			type: String,
+			required: true
+		},
+		path: {
+			type: String,
+			default: void 0
+		},
+		count: {
+			type: Number,
+			default: void 0
+		},
+		icon: {
+			type: [Object, Function],
+			default: void 0
+		},
+		contentClass: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const layout = inject(TabbedShowLayoutContextKey, { spacing: 4 });
+		return () => {
+			const fields = elementNodes(slots.default?.() ?? []);
+			return h("div", {
+				class: cn("flex flex-col", props.contentClass),
+				style: { gap: `${layout.spacing * 4}px` }
+			}, fields.map((field, index) => h(Fragment, { key: field.key ?? index }, [index > 0 ? layout.divider?.() : null, h(labeled_default, null, { default: () => field })])));
+		};
+	}
+});
+export { TabbedShowLayoutContextKey, tabbed_show_layout_tab_vue_vue_type_script_lang_default as default };

package/dist/components/admin/view/tabbed-show-layout.js

@@ -0,0 +1,4 @@
+import tabbed_show_layout_vue_vue_type_script_lang_default from "./tabbed-show-layout.vue_vue_type_script_lang.js";
+// src/components/admin/view/tabbed-show-layout.vue
+var tabbed_show_layout_default = tabbed_show_layout_vue_vue_type_script_lang_default;
+export { tabbed_show_layout_default as default };

package/dist/components/admin/view/tabbed-show-layout.vue.d.ts

@@ -41,7 +41,9 @@ export interface TabbedShowLayoutTabsSlotProps {
     activeTab: string;
     goToTab: (value: string) => void;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     spacing: {
         type: NumberConstructor;
         default: number;
@@ -78,4 +80,3 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     tabs?: (scope: TabbedShowLayoutTabsSlotProps) => VNode[];
     divider?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/admin/view/tabbed-show-layout.vue_vue_type_script_lang.js

@@ -0,0 +1,117 @@
+import { decodePath, splatBase } from "../../../form/splat-base.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { childVNodes } from "../../../lib/vnode-children.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useRouterAdapter } from "../../../router/adapter.js";
+import { TabbedShowLayoutContextKey } from "./tabbed-show-layout-tab.vue_vue_type_script_lang.js";
+import tabbed_show_layout_tab_default from "./tabbed-show-layout-tab.js";
+import { Fragment, defineComponent, h, inject, provide, ref } from "vue";
+// src/components/admin/view/tabbed-show-layout.vue?vue&type=script&lang.ts
+/**
+* `<TabbedShowLayout>` — groups a show view's fields into tabs, each field
+* labeled from its `source`. The Vue twin of `@chelone/react`'s
+* `views/tabbed-show-layout.tsx`. Tabs are the `<TabbedShowLayoutTab>` vnodes of
+* the default slot, flattened through fragments (`v-for`), so this is a render
+* function. Renders nothing until the record context has a record.
+*
+* With `syncWithLocation` (the default) the show route ends in a catch-all and
+* each tab is a path under the show route: the pathname minus the catch-all's
+* segments. A tab's segment is its `path`, else its index for every tab after
+* the first, else `''` for the first. The active tab is the first whose path
+* equals the pathname, else the first tab. The strip is native buttons: Vue
+* ships no `ui/tabs`, as `TabbedFormHeader` is hand-rolled too.
+*/
+/** The tab vnodes of a slot, looking through fragments (`v-for`). */
+function collectTabs(nodes, out = []) {
+	for (const node of nodes) if (node.type === Fragment) collectTabs(childVNodes(node), out);
+	else if (node.type === tabbed_show_layout_tab_default) out.push(node);
+	return out;
+}
+var encodeSegment = (segment) => segment.split("/").map(encodeURIComponent).join("/");
+var samePath = (path) => path.replace(/\/+$/, "").toLowerCase();
+var nextId = 0;
+var tabbed_show_layout_vue_vue_type_script_lang_default = defineComponent({
+	name: "TabbedShowLayout",
+	props: {
+		spacing: {
+			type: Number,
+			default: 4
+		},
+		syncWithLocation: {
+			type: Boolean,
+			default: true
+		},
+		value: {
+			type: String,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const adapter = useRouterAdapter();
+		const location = adapter.useLocation();
+		const params = adapter.useParams();
+		const navigate = adapter.useNavigate();
+		const translate = useTranslate();
+		const record = inject(RecordContextKey, null);
+		const local = ref();
+		const id = `chelone-show-tabs-${nextId++}`;
+		provide(TabbedShowLayoutContextKey, {
+			get spacing() {
+				return props.spacing;
+			},
+			divider: () => slots.divider?.()
+		});
+		return () => {
+			if (!record?.value) return null;
+			const tabNodes = collectTabs(slots.default?.() ?? []);
+			const segments = tabNodes.map((node, index) => node.props?.path != null ? String(node.props.path) : index > 0 ? String(index) : "");
+			const base = splatBase(location.value.pathname, params.value["*"] ?? "");
+			const segmentPath = (segment) => segment === "" ? base || "/" : `${base}/${encodeSegment(segment)}`;
+			const here = samePath(decodePath(location.value.pathname));
+			const requested = props.value ?? (props.syncWithLocation ? segments.find((segment) => samePath(decodePath(segmentPath(segment))) === here) : local.value);
+			const active = requested !== void 0 && segments.includes(requested) ? requested : segments[0] ?? "";
+			const goToTab = (next) => {
+				if (props.syncWithLocation) navigate(`${segmentPath(next)}${location.value.search}`);
+				else local.value = next;
+			};
+			const descriptors = tabNodes.map((node, index) => ({
+				value: segments[index] ?? "",
+				label: String(node.props?.label),
+				icon: node.props?.icon,
+				count: node.props?.count
+			}));
+			const activeIndex = segments.indexOf(active);
+			const activeNode = tabNodes[activeIndex];
+			return h("div", { "data-slot": "tabbed-show-layout" }, [slots.tabs ? slots.tabs({
+				tabs: descriptors,
+				activeTab: active,
+				goToTab
+			}) : h("div", {
+				role: "tablist",
+				class: "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground"
+			}, descriptors.map((tab, index) => {
+				const selected = tab.value === active;
+				return h("button", {
+					key: tab.value,
+					type: "button",
+					role: "tab",
+					id: `${id}-tab-${index}`,
+					"aria-selected": selected,
+					"aria-controls": selected ? `${id}-panel` : void 0,
+					"data-state": selected ? "active" : "inactive",
+					class: cn("inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0", selected && "bg-background text-foreground shadow-sm"),
+					onClick: () => goToTab(tab.value)
+				}, [tab.icon ? h(tab.icon) : null, h("span", [translate(tab.label, { _: tab.label }), tab.count != null ? ` (${tab.count})` : null])]);
+			})), activeNode ? h("div", {
+				key: active,
+				role: "tabpanel",
+				id: `${id}-panel`,
+				"aria-labelledby": slots.tabs ? void 0 : `${id}-tab-${activeIndex}`,
+				class: "mt-2"
+			}, [activeNode]) : null]);
+		};
+	}
+});
+export { tabbed_show_layout_vue_vue_type_script_lang_default as default };

package/dist/components/admin/view/translatable-fields-tab-content.js

@@ -0,0 +1,4 @@
+import translatable_fields_tab_content_vue_vue_type_script_lang_default from "./translatable-fields-tab-content.vue_vue_type_script_lang.js";
+// src/components/admin/view/translatable-fields-tab-content.vue
+var translatable_fields_tab_content_default = translatable_fields_tab_content_vue_vue_type_script_lang_default;
+export { translatable_fields_tab_content_default as default };

package/dist/components/admin/view/translatable-fields-tab-content.vue.d.ts

@@ -6,7 +6,9 @@ export interface TranslatableFieldsTabContentProps {
     groupKey?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     locale: {
         type: StringConstructor;
         required: true;
@@ -38,4 +40,3 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     class: string;
     groupKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/admin/view/translatable-fields-tab-content.vue_vue_type_script_lang.js

@@ -0,0 +1,62 @@
+import { provideSourceScope, useSourceScope } from "../../../form/form-context.js";
+import { useTranslatableContext } from "../../../i18n/use-translatable.js";
+import { cn } from "../../../lib/utils.js";
+import { childVNodes } from "../../../lib/vnode-children.js";
+import { RecordContextKey, provideRecordContext } from "../../../record/record-context.js";
+import labeled_default from "./labeled.js";
+import { Comment, Fragment, Text, computed, defineComponent, h, inject } from "vue";
+import { createLocaleSourceScope, getRecordForLocale } from "@chelone/core";
+// src/components/admin/view/translatable-fields-tab-content.vue?vue&type=script&lang.ts
+/**
+* `<TranslatableFieldsTabContent>` — one locale's panel. Always mounted, hidden
+* while another locale is selected. Its fields read the ambient record with
+* every translation map replaced by this locale's value. With several
+* children, each element is labeled from its own `source`. Written as a render
+* function because the children are read as vnodes, which a template cannot do.
+*/
+/** The vnodes of a slot, text included, looking through fragments (`v-for`). */
+function flatNodes(nodes, out = []) {
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		if (node.type === Fragment) flatNodes(childVNodes(node), out);
+		else out.push(node);
+	}
+	return out;
+}
+var translatable_fields_tab_content_vue_vue_type_script_lang_default = defineComponent({
+	name: "TranslatableFieldsTabContent",
+	props: {
+		locale: {
+			type: String,
+			required: true
+		},
+		groupKey: {
+			type: String,
+			default: ""
+		},
+		class: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const translatable = useTranslatableContext();
+		const ambient = inject(RecordContextKey, void 0);
+		const hidden = computed(() => translatable.selectedLocale.value !== props.locale);
+		provideRecordContext(computed(() => getRecordForLocale(ambient?.value, props.locale, translatable.locales)));
+		provideSourceScope(createLocaleSourceScope(useSourceScope(), props.locale));
+		return () => {
+			const nodes = flatNodes(slots.default?.() ?? []);
+			const labelEach = nodes.filter((node) => node.type !== Text).length > 1;
+			return h("div", {
+				role: "tabpanel",
+				"data-slot": "translatable-fields-tab-content",
+				id: `translatable-content-${props.groupKey}${props.locale}`,
+				"aria-labelledby": `translatable-header-${props.groupKey}${props.locale}`,
+				hidden: hidden.value,
+				class: cn("flex-1 outline-none", props.class)
+			}, labelEach ? nodes.map((node, index) => node.type === Text ? node : h(labeled_default, { key: node.key ?? index }, { default: () => node })) : nodes);
+		};
+	}
+});
+export { translatable_fields_tab_content_vue_vue_type_script_lang_default as default };

package/dist/components/admin/view/translatable-fields-tab.js

@@ -0,0 +1,4 @@
+import translatable_fields_tab_vue_vue_type_script_setup_true_lang_default from "./translatable-fields-tab.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/view/translatable-fields-tab.vue
+var translatable_fields_tab_default = translatable_fields_tab_vue_vue_type_script_setup_true_lang_default;
+export { translatable_fields_tab_default as default };

package/dist/components/admin/view/translatable-fields-tab.vue.d.ts

@@ -5,12 +5,13 @@ export interface TranslatableFieldsTabProps {
     groupKey?: string;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TranslatableFieldsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TranslatableFieldsTabProps> & Readonly<{}>, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<TranslatableFieldsTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TranslatableFieldsTabProps> & Readonly<{}>, {
     groupKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/admin/view/translatable-fields-tab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,44 @@
+import { useTranslatableContext } from "../../../i18n/use-translatable.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { computed, createElementBlock, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+// src/components/admin/view/translatable-fields-tab.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"data-state"
+];
+var translatable_fields_tab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "translatable-fields-tab",
+	props: {
+		locale: {},
+		groupKey: { default: "" },
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<TranslatableFieldsTab>` — the tab header for one locale. The default slot
+		* replaces the label.
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const translatable = useTranslatableContext();
+		const selected = computed(() => translatable.selectedLocale.value === props.locale);
+		const label = computed(() => translate(`ra.locales.${props.locale}`, { _: props.locale.charAt(0).toUpperCase() + props.locale.slice(1) }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				type: "button",
+				role: "tab",
+				"data-slot": "translatable-fields-tab",
+				id: `translatable-header-${__props.groupKey}${__props.locale}`,
+				"aria-selected": selected.value,
+				"aria-controls": `translatable-content-${__props.groupKey}${__props.locale}`,
+				"data-state": selected.value ? "active" : "inactive",
+				class: normalizeClass(unref(cn)("inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", props.class)),
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(translatable).selectLocale(__props.locale))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(label.value), 1)])], 10, _hoisted_1);
+		};
+	}
+});
+export { translatable_fields_tab_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/admin/view/translatable-fields-tabs.js

@@ -0,0 +1,4 @@
+import translatable_fields_tabs_vue_vue_type_script_setup_true_lang_default from "./translatable-fields-tabs.vue_vue_type_script_setup_true_lang.js";
+// src/components/admin/view/translatable-fields-tabs.vue
+var translatable_fields_tabs_default = translatable_fields_tabs_vue_vue_type_script_setup_true_lang_default;
+export { translatable_fields_tabs_default as default };