@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/view/edit.vue.js

@@ -0,0 +1,94 @@
+import { defineComponent, computed, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, unref } from "vue";
+import { useEditController } from "../../../controllers/use-edit-controller.js";
+import { useForm } from "../../../form/use-form.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { provideRecordContext } from "../../../record/record-context.js";
+import { useRedirectOptional } from "../../../router/nav-composables.js";
+import { useResourceContext, provideResourceContext } from "../../../resource-context.js";
+const _hoisted_1 = { "data-slot": "edit" };
+const _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-2xl font-bold tracking-tight"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "my-2"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "edit",
+  props: {
+    resource: {},
+    id: {},
+    title: {},
+    redirectOnSave: { type: Boolean, default: true },
+    validate: {},
+    schema: {},
+    sanitizeEmptyValues: { type: Boolean },
+    onSuccess: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = props.resource ?? useResourceContext();
+    if (!resource) {
+      throw new Error(
+        "<Edit>: no resource. Pass a `resource` prop or render inside a <Resource>."
+      );
+    }
+    provideResourceContext(resource);
+    const edit = useEditController({ resource, id: props.id });
+    const redirect = useRedirectOptional();
+    const getRecordRepresentation = useGetRecordRepresentation(resource);
+    const defaultTitle = computed(() => getRecordRepresentation(edit.record));
+    const form = useForm({
+      resource,
+      record: edit.record,
+      // Read per call: the form captures its options once, props stay live.
+      // The form captures its options once: always hand it this wrapper, so a
+      // `validate` set after setup still runs, as of the live prop.
+      validate: (values) => props.validate?.(values),
+      schema: props.schema,
+      sanitizeEmptyValues: props.sanitizeEmptyValues,
+      getRecord: () => edit.record,
+      // Rebaselined to the SERVER record in `onSaved` (as React's composed form
+      // does), so `onSuccess` sees the reconciled form.
+      resetOnSuccess: false,
+      onSubmit: async (data) => {
+        const errors = await edit.save(data, {
+          onSaved: async (saved) => {
+            form.reset(saved);
+            await props.onSuccess?.(saved);
+          }
+        });
+        if (!errors && props.redirectOnSave) {
+          redirect("list", resource);
+        }
+        return errors;
+      }
+    });
+    provideRecordContext(
+      computed(() => edit.record)
+    );
+    watch(
+      () => edit.record,
+      (record) => {
+        if (record) form.reset(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(edit).record ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "default"),
+          renderSlot(_ctx.$slots, "toolbar")
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/edit2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./edit.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,17 @@
+/** Props for {@link InfiniteList}. */
+export interface InfiniteListProps {
+    resource?: string;
+    perPage?: number;
+    title?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InfiniteListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InfiniteListProps> & 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/infinite-list.vue.js

@@ -0,0 +1,55 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { useInfiniteListController } from "../../../controllers/use-infinite-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 { useResourceContext, provideResourceContext } from "../../../resource-context.js";
+const _hoisted_1 = { "data-slot": "list" };
+const _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-2xl font-bold tracking-tight mb-2"
+};
+const _hoisted_4 = { class: "flex items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "infinite-list",
+  props: {
+    resource: {},
+    perPage: {},
+    title: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = props.resource ?? useResourceContext();
+    if (!resource) {
+      throw new Error(
+        "<InfiniteList>: no resource. Pass a `resource` prop or render inside a <Resource>."
+      );
+    }
+    provideResourceContext(resource);
+    const controller = useInfiniteListController({
+      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 {
+  _sfc_main as default
+};

package/dist/components/admin/view/infinite-list2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./infinite-list.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,108 @@
+/**
+ * `<Labeled>` — labels a plain field from its `source`, for layouts that do not
+ * wrap every field in a `<RecordField>` (tabbed show, translatable fields). The
+ * Vue twin of `@chelone/react`'s `view/labeled.tsx`.
+ *
+ * Idiom translation from the twin: React reads the props of its one `children`
+ * element; Vue reads the props of the first vnode in the default slot, which
+ * only a render function can inspect (hence no `<script setup>`). The label is
+ * skipped when `label` is `false`, the child's `label` is `false`, or the child
+ * is a native element, a `<Labeled>` or a `<RecordField>`, which label
+ * themselves.
+ */
+import { type PropType, type VNode } from "vue";
+/** Props for {@link Labeled}. */
+export interface LabeledProps {
+    /** Overrides the child's `label`; `false` renders no label. */
+    label?: string | false;
+    /** Overrides the child's `source` when resolving the label. */
+    source?: string;
+    /** Overrides the child's `resource` when resolving the label. */
+    resource?: string;
+    isRequired?: boolean;
+    /** Makes the label a `<label>` for the control with this id. */
+    htmlFor?: string;
+    fullWidth?: boolean;
+    /** The wrapper element. Defaults to `div`. */
+    as?: string;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | false>;
+        default: undefined;
+    };
+    source: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    resource: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    isRequired: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | false>;
+        default: undefined;
+    };
+    source: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    resource: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    isRequired: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    htmlFor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    source: string;
+    class: string;
+    label: string | false;
+    resource: string;
+    as: string;
+    htmlFor: string;
+    isRequired: boolean;
+    fullWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,70 @@
+import { defineComponent, getCurrentInstance, h, Comment, Fragment } from "vue";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$2 from "../common/field-label-text.vue.js";
+import _sfc_main$1 from "../fields/record-field.vue.js";
+function firstNode(nodes) {
+  for (const node of nodes) {
+    if (node.type === Comment) continue;
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      const inner = firstNode(node.children);
+      if (inner) return inner;
+    } else {
+      return node;
+    }
+  }
+  return void 0;
+}
+const _sfc_main = defineComponent({
+  name: "Labeled",
+  props: {
+    // `false` in the type makes Vue cast an ABSENT label to `false`; the
+    // explicit `undefined` default keeps absent distinct from `:label="false"`.
+    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 labelsItself = child != null && (typeof child.type === "string" || typeof child.type === "symbol" || child.type === _sfc_main$1 || child.type === self);
+      const showLabel = !labelsItself && 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(_sfc_main$2, {
+              label: props.label ?? childProps.label,
+              source: props.source ?? childProps.source,
+              resource: props.resource ?? childProps.resource,
+              isRequired: props.isRequired
+            })
+          ) : null,
+          slots.default?.()
+        ]
+      );
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/view/labeled2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./labeled.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,17 @@
+/** Props for {@link List}. */
+export interface ListProps {
+    resource?: string;
+    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>, {
+    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.js

@@ -0,0 +1,52 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+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 { useResourceContext, provideResourceContext } from "../../../resource-context.js";
+const _hoisted_1 = { "data-slot": "list" };
+const _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-2xl font-bold tracking-tight mb-2"
+};
+const _hoisted_4 = { class: "flex items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "list",
+  props: {
+    resource: {},
+    perPage: {},
+    title: {}
+  },
+  setup(__props) {
+    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 {
+  _sfc_main as default
+};

package/dist/components/admin/view/list2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./list.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,32 @@
+/**
+ * `<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.
+ */
+import type { Identifier } from "@chelone/core";
+/** Props for {@link Show}. */
+export interface ShowProps {
+    resource?: string;
+    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>, {
+    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.js

@@ -0,0 +1,53 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, unref } from "vue";
+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 { useResourceContext, provideResourceContext } from "../../../resource-context.js";
+const _hoisted_1 = { "data-slot": "show" };
+const _hoisted_2 = { class: "flex justify-between items-start flex-wrap gap-2 my-2" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-2xl font-bold tracking-tight"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "my-2"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "show",
+  props: {
+    resource: {},
+    id: {},
+    title: {}
+  },
+  setup(__props) {
+    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 {
+  _sfc_main as default
+};

package/dist/components/admin/view/show2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./show.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,83 @@
+/**
+ * `<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.
+ */
+import { type Component, type InjectionKey, type PropType, type VNode, type VNodeChild } from "vue";
+/** Props for {@link TabbedShowLayoutTab}. */
+export interface TabbedShowLayoutTabProps {
+    /** The tab label. Translated with itself as the fallback. */
+    label: string;
+    /**
+     * The URL segment under the show route. Defaults to the tab's index for every
+     * tab after the first, and `''` (the show route itself) for the first.
+     */
+    path?: string;
+    /** Shown after the label as `(count)`. */
+    count?: number;
+    /** Shown before the label: a component, rendered without props. */
+    icon?: Component;
+    /** Class names for the element wrapping this tab's fields. */
+    contentClass?: string;
+}
+/** What a `<TabbedShowLayout>` hands down to the tab it renders. */
+export interface TabbedShowLayoutContext {
+    /** The gap between fields, in units of 4px. */
+    readonly spacing: number;
+    /** The layout's `#divider` slot. */
+    divider?: () => VNodeChild;
+}
+export declare const TabbedShowLayoutContextKey: InjectionKey<TabbedShowLayoutContext>;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+    contentClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    path: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    icon: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+    contentClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    count: number;
+    path: string;
+    icon: Component;
+    contentClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,48 @@
+import { defineComponent, inject, h, Fragment, Comment, Text } from "vue";
+import { cn } from "../../../lib/utils.js";
+import _sfc_main$1 from "./labeled.vue.js";
+const TabbedShowLayoutContextKey = /* @__PURE__ */ Symbol("chelone-tabbed-show-layout");
+function elementNodes(nodes, out = []) {
+  for (const node of nodes) {
+    if (node.type === Comment || node.type === Text) continue;
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      elementNodes(node.children, out);
+    } else {
+      out.push(node);
+    }
+  }
+  return out;
+}
+const _sfc_main = 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(_sfc_main$1, null, { default: () => field })
+          ])
+        )
+      );
+    };
+  }
+});
+export {
+  TabbedShowLayoutContextKey,
+  _sfc_main as default
+};

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

@@ -0,0 +1,6 @@
+import _sfc_main from "./tabbed-show-layout-tab.vue.js";
+import { TabbedShowLayoutContextKey } from "./tabbed-show-layout-tab.vue.js";
+export {
+  TabbedShowLayoutContextKey,
+  _sfc_main as default
+};