feat(AuthForm): add separator slot

[mrkaashee]

Summary

Adds a separator slot to AuthForm, allowing custom content between the providers and the form fields instead of being locked to USeparator.

Changes

• Added separator to AuthFormSlots type
• Wrapped USeparator in <slot name="separator"> so it remains the default but can be overridden
• Slot renders when providers + fields are both present, or when the slot is explicitly provided

Usage

<UAuthForm ...>
  <template #separator>
    <div class="flex items-center gap-3">
      <div class="h-px flex-1 bg-border" />
      <span class="text-sm text-muted">or continue with</span>
      <div class="h-px flex-1 bg-border" />
    </div>
  </template>
</UAuthForm>

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a1efd456-96e6-450b-b15c-4c219abf454d

📥 Commits

Reviewing files that changed from the base of the PR and between 59295a6 and 15ed952.

📒 Files selected for processing (1)

• src/runtime/components/AuthForm.vue

---

📝 Walkthrough

Walkthrough

The changes update src/runtime/components/AuthForm.vue by adding an optional named slot separator to the AuthFormSlots type and replacing the direct <USeparator> rendering with a <slot name="separator"> wrapper that falls back to <USeparator>. The fallback still uses the original v-if="providers?.length && fields?.length", while any provided separator slot from a parent will override the fallback's content/visibility.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a separator slot to the AuthForm component.
Description check	✅ Passed	The description is directly related to the changeset, explaining the new separator slot feature with clear examples of usage and implementation details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/runtime/components/AuthForm.vue (1)

230-236: Add tests for the new separator slot behavior.

Please add a spec covering slots: { separator: ... } (including rendering when providers/fields are absent), since current test/components/AuthForm.spec.ts covers separator prop but not the new slot path.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/runtime/components/AuthForm.vue` around lines 230 - 236, Add a unit test
in test/components/AuthForm.spec.ts that mounts AuthForm.vue with providers and
fields empty (or absent) and supplies a slots: { separator: '<div
data-test="sep">MySep</div>' } value, then assert the separator slot content is
rendered (data-test="sep") when providers/fields are absent; also add a
complementary case where providers/fields exist to ensure the slot still renders
under the existing condition. Use the component name AuthForm and the slot name
"separator" to locate the behavior to test.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/runtime/components/AuthForm.vue`:
- Around line 230-236: Add a unit test in test/components/AuthForm.spec.ts that
mounts AuthForm.vue with providers and fields empty (or absent) and supplies a
slots: { separator: '<div data-test="sep">MySep</div>' } value, then assert the
separator slot content is rendered (data-test="sep") when providers/fields are
absent; also add a complementary case where providers/fields exist to ensure the
slot still renders under the existing condition. Use the component name AuthForm
and the slot name "separator" to locate the behavior to test.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: aec8c91b-cad7-47e9-b2f0-c1c64331bf99

📥 Commits

Reviewing files that changed from the base of the PR and between b566b48 and 59295a6.

📒 Files selected for processing (1)

• src/runtime/components/AuthForm.vue

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6305

commit: 15ed952