@chelone/vue 0.0.0-stage → 0.1.1

package/dist/form/form-groups.js

@@ -0,0 +1,128 @@
+import { createFormGroups, reduceGroupState } from "@chelone/core";
+import { inject, provide, computed, toValue, shallowRef, watch, onScopeDispose, watchEffect } from "vue";
+import { useCheloneFormContext } from "./form-context.js";
+import { subscribeStore } from "./subscribe-ref.js";
+const FormGroupsKey = /* @__PURE__ */ Symbol(
+  "chelone-form-groups"
+);
+const FormGroupNameKey = /* @__PURE__ */ Symbol(
+  "chelone-form-group-name"
+);
+function provideFormGroups(groups) {
+  let created;
+  const registry = computed(() => {
+    const given = toValue(groups);
+    if (given) return given;
+    created ??= createFormGroups();
+    return created;
+  });
+  provide(FormGroupsKey, registry);
+  return registry.value;
+}
+function useFormGroupsRef() {
+  return inject(FormGroupsKey, null) ?? void 0;
+}
+function useFormGroups() {
+  const registry = useFormGroupsRef();
+  if (!registry) {
+    throw new Error(
+      "useFormGroups: no <FormGroupsProvider> found above this component."
+    );
+  }
+  return registry.value;
+}
+function useOptionalFormGroups() {
+  return useFormGroupsRef()?.value;
+}
+function provideFormGroup(name) {
+  const parent = inject(FormGroupNameKey, void 0);
+  provide(
+    FormGroupNameKey,
+    computed(() => {
+      const own = toValue(name);
+      const above = parent?.value.names ?? [];
+      return {
+        name: own,
+        names: above.includes(own) ? above : [...above, own]
+      };
+    })
+  );
+}
+function useFormGroupName() {
+  const scope = inject(FormGroupNameKey, void 0);
+  return computed(() => scope?.value.name);
+}
+function useRegisterFieldGroup(source) {
+  const registry = useFormGroupsRef();
+  const scope = inject(FormGroupNameKey, void 0);
+  if (!registry || !scope) return;
+  watchEffect(
+    (onCleanup) => {
+      const target = registry.value;
+      const names = scope.value.names;
+      for (const name of names) target.register(name, source);
+      onCleanup(() => {
+        for (const name of names) target.unregister(name, source);
+      });
+    },
+    { flush: "sync" }
+  );
+}
+function sameDisplayError(a, b) {
+  if (a === b) return true;
+  if (typeof a === "string" || typeof b === "string") return false;
+  if (a.message !== b.message) return false;
+  const aArgs = a.args ?? {};
+  const bArgs = b.args ?? {};
+  const aKeys = Object.keys(aArgs);
+  if (aKeys.length !== Object.keys(bArgs).length) return false;
+  return aKeys.every((key) => aArgs[key] === bArgs[key]);
+}
+function sameGroupState(a, b) {
+  if (a.isValid !== b.isValid || a.isDirty !== b.isDirty || a.isTouched !== b.isTouched || a.isValidating !== b.isValidating) {
+    return false;
+  }
+  const aKeys = Object.keys(a.errors);
+  if (aKeys.length !== Object.keys(b.errors).length) return false;
+  return aKeys.every((key) => {
+    const other = b.errors[key];
+    return other !== void 0 && sameDisplayError(a.errors[key], other);
+  });
+}
+function useFormGroup(name) {
+  useFormGroups();
+  const registry = useFormGroupsRef();
+  const { form } = useCheloneFormContext();
+  const reduce = () => reduceGroupState(
+    form.store.state.fieldMeta,
+    registry.value.getMembers(toValue(name))
+  );
+  const state = shallowRef(reduce());
+  const refresh = () => {
+    const next = reduce();
+    if (!sameGroupState(state.value, next)) state.value = next;
+  };
+  const stopStore = subscribeStore(form.store, refresh);
+  const stopWatch = watch(
+    [registry, () => toValue(name)],
+    (_, __, onCleanup) => {
+      onCleanup(registry.value.subscribe(refresh));
+      refresh();
+    },
+    { immediate: true, flush: "sync" }
+  );
+  onScopeDispose(() => {
+    stopStore();
+    stopWatch();
+  });
+  return state;
+}
+export {
+  provideFormGroup,
+  provideFormGroups,
+  useFormGroup,
+  useFormGroupName,
+  useFormGroups,
+  useOptionalFormGroups,
+  useRegisterFieldGroup
+};

package/dist/form/form-scope.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Chooses the form a multi-section form (`<TabbedForm>`) drives, the twin of
+ * `@chelone/react`'s `form-scope.tsx`. Given a `save`, it builds and provides
+ * its own form from the props, even inside a view (a quick-create dialog on an
+ * edit page). Without one it uses the ambient form of the view above it
+ * (`<Edit>`, `<Create>`), so the record hydration and the view's save pipeline
+ * stay in effect. With neither, it throws.
+ *
+ * The mode is fixed at setup: the form is created once.
+ */
+import { type FormSubmit, type UseFormOptions } from "./use-form.js";
+/**
+ * The form props of a form that may borrow its view's form. With `save` it
+ * builds its own form and takes every option; without it the view owns the
+ * form, so the options belong on the view (`<Edit validate>`), not here.
+ *
+ * The without-`save` member spells its keys out so `defineProps` can resolve
+ * it; `form-scope.test-d.ts` pins the list against `UseFormOptions`.
+ */
+export type OptionalSaveFormProps<TFormData> = (Omit<UseFormOptions<TFormData>, "onSubmit"> & {
+    save: FormSubmit<TFormData>;
+}) | {
+    save?: undefined;
+    record?: never;
+    resource?: never;
+    schema?: never;
+    validate?: never;
+    sanitizeEmptyValues?: never;
+    getRecord?: never;
+    resetOnSuccess?: never;
+};
+/**
+ * Call in `setup`. Returns the submit pipeline of whichever form is in effect;
+ * `name` is the calling component, for the missing-save error.
+ */
+export declare function useFormScope<TFormData>(name: string, props: OptionalSaveFormProps<TFormData>): () => Promise<void>;

package/dist/form/form-scope.js

@@ -0,0 +1,32 @@
+import { useOptionalCheloneFormContext } from "./form-context.js";
+import { useForm } from "./use-form.js";
+function useFormScope(name, props) {
+  const ambient = useOptionalCheloneFormContext();
+  const save = props.save;
+  if (save) {
+    const { submit } = useForm({
+      record: props.record,
+      resource: props.resource,
+      schema: props.schema,
+      // The form captures its options once: hand it this wrapper, so a
+      // `validate` set after setup still runs, as of the live prop.
+      validate: (values) => props.validate?.(values),
+      sanitizeEmptyValues: props.sanitizeEmptyValues,
+      getRecord: () => props.getRecord?.(),
+      resetOnSuccess: props.resetOnSuccess,
+      // Same for `save`: a parent that swaps the prop gets the latest handler.
+      onSubmit: (data) => (props.save ?? save)(data)
+    });
+    return submit;
+  }
+  if (ambient) {
+    const { form, submit } = ambient;
+    return submit ?? (() => form.handleSubmit());
+  }
+  throw new Error(
+    `<${name}> needs a \`save\` prop outside a view that provides a form (<Edit>, <Create>).`
+  );
+}
+export {
+  useFormScope
+};

package/dist/form/index.d.ts

@@ -0,0 +1,29 @@
+export { firstFieldError } from "./field-error.js";
+export type { CheloneFormContextValue } from "./form-context.js";
+export { CheloneFormContextKey, provideCheloneForm, provideSourceScope, SourceScopeKey, useCheloneFormContext, useOptionalCheloneFormContext, useSourceScope, useWrappedSource, } from "./form-context.js";
+export type { FormGroupProviderProps } from "./form-group-provider.vue.js";
+export { default as FormGroupProvider } from "./form-group-provider.vue.js";
+export { provideFormGroup, provideFormGroups, useFormGroup, useFormGroupName, useFormGroups, useOptionalFormGroups, useRegisterFieldGroup, } from "./form-groups.js";
+export type { FormGroupsProviderProps } from "./form-groups-provider.vue.js";
+export { default as FormGroupsProvider } from "./form-groups-provider.vue.js";
+export type { OptionalSaveFormProps } from "./form-scope.js";
+export { useFormScope } from "./form-scope.js";
+export { decodePath, splatBase } from "./splat-base.js";
+export type { TabbedFormProps } from "./tabbed-form.vue.js";
+export { default as TabbedForm } from "./tabbed-form.vue.js";
+export type { UseTabbedFormResult } from "./tabbed-form-context.js";
+export { useTabbedFormContext } from "./tabbed-form-context.js";
+export type { TabbedFormTabProps } from "./tabbed-form-tab.vue.js";
+export { default as TabbedFormTab } from "./tabbed-form-tab.vue.js";
+export type { FormSubmit, UseFormOptions, UseFormReturn, } from "./use-form.js";
+export { useForm } from "./use-form.js";
+export type { UseInputOptions, UseInputReturn } from "./use-input.js";
+export { useInput } from "./use-input.js";
+export type { WarnWhenUnsavedChangesDecision } from "./use-warn-when-unsaved-changes.js";
+export { useWarnWhenUnsavedChanges } from "./use-warn-when-unsaved-changes.js";
+export type { UseWizardFormResult } from "./use-wizard-form.js";
+export { useWizardForm, useWizardFormContext } from "./use-wizard-form.js";
+export type { WizardFormProps } from "./wizard-form.vue.js";
+export { default as WizardForm } from "./wizard-form.vue.js";
+export type { WizardFormStepProps } from "./wizard-form-step.vue.js";
+export { default as WizardFormStep } from "./wizard-form-step.vue.js";

package/dist/form/splat-base.d.ts

@@ -0,0 +1,9 @@
+/** Decode a percent-encoded path, leaving it as is when it is malformed. */
+export declare function decodePath(path: string): string;
+/**
+ * Where a route with a trailing catch-all ends, as the encoded pathname minus
+ * the trailing segments of the splat, without a trailing slash. The pathname is
+ * percent-encoded and the splat is decoded, so whole segments are dropped
+ * rather than a textual suffix.
+ */
+export declare function splatBase(pathname: string, splat: string): string;

package/dist/form/splat-base.js

@@ -0,0 +1,19 @@
+function decodePath(path) {
+  try {
+    return decodeURIComponent(path);
+  } catch {
+    return path;
+  }
+}
+function splatBase(pathname, splat) {
+  if (splat === "") return pathname.replace(/\/+$/, "");
+  const count = splat.split("/").length;
+  const segments = pathname.split("/");
+  const tail = segments.slice(-count).join("/");
+  const own = segments.length > count && decodePath(tail) === splat ? segments.slice(0, -count).join("/") : pathname;
+  return own.replace(/\/+$/, "");
+}
+export {
+  decodePath,
+  splatBase
+};

package/dist/form/subscribe-ref.d.ts

@@ -0,0 +1,56 @@
+/**
+ * `useSubscribable` — the Vue reactivity bridge for form-core's own controllers
+ * (`FormController` / `FieldBinding`). It is the SAME shallowRef + subscribe +
+ * onScopeDispose pattern as the V1-a `useMicroStore` (store/use-micro-store.ts), narrowed
+ * to the minimal readable shape form-core exposes.
+ *
+ * Why a sibling helper instead of reusing `useMicroStore`:
+ * - `useMicroStore<T>` is typed to `MicroStore<T>`, which requires `getSnapshot` +
+ *   `setState` + `subscribe` + `destroy` + `onDestroy`. The P4 record/list
+ *   controllers are built on `createMicroStore`, so they satisfy it. The form
+ *   controllers are NOT — a `FormController`/`FieldBinding` wraps a
+ *   `@tanstack/form-core` store and exposes only the `useSyncExternalStore`
+ *   contract (`subscribe` + `getSnapshot`), never `setState`/`onDestroy`. So
+ *   they cannot be passed to `useMicroStore` without a lie of a cast.
+ * - Subscribing THROUGH the controller/binding is also load-bearing, not
+ *   incidental: `FormController.subscribe` runs `form.mount()` on the 0->1
+ *   transition (and unmounts on the last unsubscribe); `FieldBinding.subscribe`
+ *   runs `field.mount()` (seeds the guarded default, registers the field so
+ *   submit-time validation sees it). Bridging the raw form-core store directly
+ *   (e.g. via `@tanstack/vue-store` over `form.store`) would read state but
+ *   NEVER mount — validators would never attach. The 4R lifecycle lives on the
+ *   controller's `subscribe`, so the bridge must go through it.
+ *
+ * Result: mounting a component that calls `useForm`/`useInput` acquires the
+ * form/field (mount) during `setup`; `onScopeDispose` releases it (unmount) on
+ * unmount or `effectScope().stop()` — the exact 4R mapping the V1-a bridge
+ * proves, applied to the form-core seam.
+ */
+import { type Ref } from "vue";
+/**
+ * The minimal readable-store shape form-core's controllers expose — the
+ * `useSyncExternalStore` contract. A `FormController` and a `FieldBinding` both
+ * satisfy it structurally (each has extra members; excess is fine for a named
+ * target type).
+ */
+export interface Subscribable<T> {
+    getSnapshot(): T;
+    subscribe(listener: () => void): () => void;
+}
+/**
+ * Bridge a form-core `Subscribable<T>` into a Vue `shallowRef`. Subscribes on
+ * `setup` (driving the 4R mount refcount) and releases on scope disposal. The
+ * whole snapshot swaps on each mutation — form-core hands out a fresh, stable
+ * state object per change, so a shallow ref is the right granularity; callers
+ * derive fine-grained `computed`s off it.
+ */
+export declare function useSubscribable<T>(source: Subscribable<T>): Readonly<Ref<T>>;
+/**
+ * Subscribe to a `@tanstack/store` store and return the unsubscribe function a
+ * {@link Subscribable} promises: the store hands back a `Subscription` object.
+ */
+export declare function subscribeStore(store: {
+    subscribe(listener: () => void): {
+        unsubscribe(): void;
+    };
+}, listener: () => void): () => void;

package/dist/form/subscribe-ref.js

@@ -0,0 +1,17 @@
+import { shallowRef, onScopeDispose } from "vue";
+function useSubscribable(source) {
+  const state = shallowRef(source.getSnapshot());
+  const unsubscribe = source.subscribe(() => {
+    state.value = source.getSnapshot();
+  });
+  onScopeDispose(unsubscribe);
+  return state;
+}
+function subscribeStore(store, listener) {
+  const subscription = store.subscribe(listener);
+  return () => subscription.unsubscribe();
+}
+export {
+  subscribeStore,
+  useSubscribable
+};

package/dist/form/tabbed-form-context.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The ambient tabbed-form controller, the twin of `@chelone/react`'s
+ * `TabbedFormContext`. `<TabbedForm>` provides it; headers, panels and custom
+ * navigation read it with {@link useTabbedFormContext}.
+ */
+import { type InjectionKey, type Ref } from "vue";
+/** The headless tabbed-form controller surface. */
+export interface UseTabbedFormResult {
+    /** The name of the visible tab. */
+    activeTab: Readonly<Ref<string>>;
+    /** Whether the tabs are URL-synced (`true`) or held locally (`false`). */
+    syncWithLocation: boolean;
+    /** Show the named tab. Unknown names are ignored. */
+    goToTab(name: string): void;
+    /** Submit the whole form: collects values from EVERY (mounted) tab. */
+    submit(): Promise<void>;
+}
+export declare const TabbedFormContextKey: InjectionKey<UseTabbedFormResult>;
+/** Provide the controller to the tab subtree (called by `<TabbedForm>`). */
+export declare function provideTabbedForm(value: UseTabbedFormResult): void;
+/** The ambient tabbed-form controller; throws outside a `<TabbedForm>`. */
+export declare function useTabbedFormContext(): UseTabbedFormResult;

package/dist/form/tabbed-form-context.js

@@ -0,0 +1,21 @@
+import { provide, inject } from "vue";
+const TabbedFormContextKey = /* @__PURE__ */ Symbol(
+  "chelone-tabbed-form-context"
+);
+function provideTabbedForm(value) {
+  provide(TabbedFormContextKey, value);
+}
+function useTabbedFormContext() {
+  const ctx = inject(TabbedFormContextKey, null);
+  if (!ctx) {
+    throw new Error(
+      "useTabbedFormContext: no <TabbedForm> found above this component."
+    );
+  }
+  return ctx;
+}
+export {
+  TabbedFormContextKey,
+  provideTabbedForm,
+  useTabbedFormContext
+};

package/dist/form/tabbed-form-header.vue.d.ts

@@ -0,0 +1,10 @@
+/** Props for {@link TabbedFormHeader}. */
+export interface TabbedFormHeaderProps {
+    /** The tab name, also the form group its validity dot reads. */
+    name: string;
+    label: string;
+    /** The tab's link target when the tabs are URL-synced; omit for a button. */
+    href?: string;
+}
+declare const _default: import("vue").DefineComponent<TabbedFormHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/form/tabbed-form-header.vue.js

@@ -0,0 +1,53 @@
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, unref, createElementBlock, createCommentVNode } from "vue";
+import { useFormGroup } from "./form-groups.js";
+import { useTabbedFormContext } from "./tabbed-form-context.js";
+const _hoisted_1 = ["data-chelone-tab-error"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabbed-form-header",
+  props: {
+    name: {},
+    label: {},
+    href: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { activeTab, goToTab } = useTabbedFormContext();
+    const group = useFormGroup(() => props.name);
+    const active = computed(() => activeTab.value === props.name);
+    function onClick(event) {
+      if (props.href !== void 0) {
+        if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+          return;
+        }
+        event.preventDefault();
+      }
+      goToTab(props.name);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.href === void 0 ? "button" : "a"), {
+        type: __props.href === void 0 ? "button" : void 0,
+        href: __props.href,
+        role: "tab",
+        id: `tabheader-${__props.name}`,
+        "data-chelone-tab-header": __props.name,
+        "aria-selected": active.value,
+        "aria-controls": `tabpanel-${__props.name}`,
+        "data-active": active.value || void 0,
+        onClick
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(__props.label) + " ", 1),
+          !unref(group).isValid ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            "data-chelone-tab-error": __props.name,
+            "aria-hidden": "true"
+          }, toDisplayString(" •"), 8, _hoisted_1)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["type", "href", "id", "data-chelone-tab-header", "aria-selected", "aria-controls", "data-active"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/form/tabbed-form-header2.vue.js

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

package/dist/form/tabbed-form-tab.vue.d.ts

@@ -0,0 +1,21 @@
+/** Props for {@link TabbedFormTab}. */
+export interface TabbedFormTabProps {
+    /** The tab name, also its form group name: its inputs register into it. */
+    name: string;
+    /** The tab header label. Defaults to `name`. */
+    label?: string;
+    /**
+     * The URL segment under the form base when the tabs are URL-synced. Defaults
+     * to `name` for every tab after the first and to `''` for the first.
+     */
+    path?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TabbedFormTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TabbedFormTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/form/tabbed-form-tab.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent, computed, openBlock, createElementBlock, renderSlot } from "vue";
+import { provideFormGroup } from "./form-groups.js";
+import { useTabbedFormContext } from "./tabbed-form-context.js";
+const _hoisted_1 = ["data-chelone-tab", "id", "aria-labelledby", "hidden", "aria-hidden"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabbed-form-tab",
+  props: {
+    name: {},
+    label: {},
+    path: {}
+  },
+  setup(__props) {
+    const props = __props;
+    provideFormGroup(() => props.name);
+    const { activeTab } = useTabbedFormContext();
+    const hidden = computed(() => activeTab.value !== props.name);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "tabpanel",
+        "data-chelone-tab": __props.name,
+        id: `tabpanel-${__props.name}`,
+        "aria-labelledby": `tabheader-${__props.name}`,
+        hidden: hidden.value,
+        "aria-hidden": hidden.value || void 0
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/form/tabbed-form-tab2.vue.js

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

package/dist/form/tabbed-form.vue.d.ts

@@ -0,0 +1,30 @@
+import type { OptionalSaveFormProps } from "./form-scope.js";
+/**
+ * Props for {@link TabbedForm}. With `save` the form builds its own form and
+ * takes every form option; without it the form drives the one of the view above
+ * it (`<Edit>`, `<Create>`), which takes the other options.
+ */
+export type TabbedFormProps<TFormData> = OptionalSaveFormProps<TFormData> & {
+    /**
+     * Sync the active tab with the URL (default `true`): each tab is a path under
+     * the form's base, so a tab can be deep-linked and Back restores the previous
+     * one. `false` holds the tab locally and leaves the URL alone. Read once at
+     * setup.
+     */
+    syncWithLocation?: boolean;
+};
+declare const _default: <TFormData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & TabbedFormProps<TFormData> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/form/tabbed-form.vue.js

@@ -0,0 +1,118 @@
+import { defineComponent, useSlots, shallowRef, computed, ref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, renderSlot } from "vue";
+import { useRouter } from "vue-router";
+import { useRouterAdapter, useRouterAdapterOptional } from "../router/adapter.js";
+import { useFormScope } from "./form-scope.js";
+import { provideFormGroups } from "./form-groups.js";
+import _sfc_main$1 from "./tabbed-form-header.vue.js";
+import _sfc_main$2 from "./tabbed-form-tab.vue.js";
+import { splatBase, decodePath } from "./splat-base.js";
+import { provideTabbedForm } from "./tabbed-form-context.js";
+const _hoisted_1 = {
+  role: "tablist",
+  "data-chelone-tablist": ""
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "tabbed-form",
+  props: {
+    record: {},
+    resource: {},
+    schema: {},
+    validate: {},
+    sanitizeEmptyValues: { type: Boolean },
+    getRecord: {},
+    resetOnSuccess: { type: Boolean, default: true },
+    save: {},
+    syncWithLocation: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const submit = useFormScope("TabbedForm", props);
+    provideFormGroups();
+    function collectTabs(nodes, tabs2 = []) {
+      for (const node of nodes) {
+        if (node.type === Fragment && Array.isArray(node.children)) {
+          collectTabs(node.children, tabs2);
+        } else if (node.type === _sfc_main$2) {
+          const name = String(node.props?.name);
+          const path = node.props?.path;
+          tabs2.push({
+            name,
+            label: String(node.props?.label ?? name),
+            path: path != null ? String(path) : tabs2.length > 0 ? name : ""
+          });
+        }
+      }
+      return tabs2;
+    }
+    const tabs = shallowRef([]);
+    function readTabs() {
+      const next = collectTabs(slots.default?.() ?? []);
+      const prev = tabs.value;
+      const same = next.length === prev.length && next.every(
+        (tab, i) => tab.name === prev[i]?.name && tab.path === prev[i]?.path
+      );
+      if (!same) tabs.value = next;
+      return next;
+    }
+    const syncWithLocation = props.syncWithLocation;
+    const adapter = syncWithLocation ? useRouterAdapter() : useRouterAdapterOptional();
+    const location = syncWithLocation ? adapter?.useLocation() : void 0;
+    const params = syncWithLocation ? adapter?.useParams() : void 0;
+    const navigate = syncWithLocation ? adapter?.useNavigate() : void 0;
+    const router = syncWithLocation ? useRouter() : void 0;
+    const base = computed(
+      () => splatBase(location?.value.pathname ?? "", params?.value["*"] ?? "")
+    );
+    const encodeSegment = (segment) => segment.split("/").map(encodeURIComponent).join("/");
+    function tabPath(tab) {
+      return tab.path === "" ? base.value || "/" : `${base.value}/${encodeSegment(tab.path)}`;
+    }
+    const samePath = (path) => path.replace(/\/+$/, "").toLowerCase();
+    const selected = ref();
+    const activeTab = computed(() => {
+      const names = tabs.value.map((tab) => tab.name);
+      if (syncWithLocation) {
+        const here = samePath(decodePath(location?.value.pathname ?? ""));
+        const matched = tabs.value.find(
+          (tab) => samePath(decodePath(tabPath(tab))) === here
+        );
+        return matched?.name ?? names[0] ?? "";
+      }
+      const wanted = selected.value;
+      return wanted !== void 0 && names.includes(wanted) ? wanted : names[0] ?? "";
+    });
+    function tabHref(tab) {
+      return router?.resolve(tabPath(tab)).href;
+    }
+    provideTabbedForm({
+      activeTab,
+      syncWithLocation,
+      goToTab(name) {
+        const tab = tabs.value.find((candidate) => candidate.name === name);
+        if (!tab) return;
+        if (syncWithLocation) navigate?.(tabPath(tab));
+        else selected.value = name;
+      },
+      submit
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(readTabs(), (tab) => {
+            return openBlock(), createBlock(_sfc_main$1, {
+              key: tab.name,
+              name: tab.name,
+              label: tab.label,
+              href: tabHref(tab)
+            }, null, 8, ["name", "label", "href"]);
+          }), 128))
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/form/tabbed-form2.vue.js

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