[PR #2634] refactor(frontend): split FormField into composable form primitives #5784

Open
opened 2026-04-16 13:52:08 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2634
Author: @tink-bot
Created: 4/15/2026
Status: 🔄 Open

Base: mainHead: refactor-form-components


📝 Commits (10+)

  • 4e88622 feat(frontend): add FormInput primitive component
  • 2dd02a6 feat(frontend): add FormSelect primitive component
  • 5ffd073 feat(frontend): add FormCheckbox primitive component
  • 0b80759 refactor(frontend): FormField supports two-col layout
  • 8ccf030 refactor(frontend): use form primitives in user settings General view
  • 5e15cfe refactor(frontend): use form primitives in WebhookManager
  • 7b277bd refactor(frontend): use FormCheckbox for remember-me on Login
  • 9d31aaa fix(frontend): restore checkbox spacing and two-col layout styles
  • 7fc73a5 fix(frontend): restore margin between stacked FormCheckbox siblings
  • e332baa fix(frontend): make FormCheckbox block-level so siblings drop to next line

📊 Changes

11 files changed (+772 additions, -454 deletions)

View changed files

frontend/src/components/input/FormCheckbox.test.ts (+42 -0)
frontend/src/components/input/FormCheckbox.vue (+41 -0)
📝 frontend/src/components/input/FormField.test.ts (+26 -1)
📝 frontend/src/components/input/FormField.vue (+56 -39)
frontend/src/components/input/FormInput.test.ts (+110 -0)
frontend/src/components/input/FormInput.vue (+74 -0)
frontend/src/components/input/FormSelect.test.ts (+82 -0)
frontend/src/components/input/FormSelect.vue (+55 -0)
📝 frontend/src/components/misc/WebhookManager.vue (+28 -48)
📝 frontend/src/views/user/Login.vue (+5 -10)
📝 frontend/src/views/user/settings/General.vue (+253 -356)

📄 Description

Introduces FormInput, FormSelect, and FormCheckbox primitives alongside a reshaped FormField (now supporting a two-col layout) so settings pages stop hand-rolling Bulma .field/.control/.input/.select markup — making a future Bulma removal a scoped, per-primitive change.

Migrates: General.vue (31 fields), WebhookManager.vue, and the remember-me checkbox on Login.vue. ApiTokens.vue, EditTeam.vue, Register.vue, and PasswordReset.vue either already use FormField or contain only composite layouts that don't fit the primitives cleanly; left for the follow-up migration.

Test plan

  • Open Settings → General and verify every row renders, inputs/selects/checkboxes work, and saving persists.
  • Open a project's Webhooks and exercise the create form (target URL, secret, basic-auth toggle).
  • Log in with "remember me" toggled on.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/2634 **Author:** [@tink-bot](https://github.com/tink-bot) **Created:** 4/15/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `refactor-form-components` --- ### 📝 Commits (10+) - [`4e88622`](https://github.com/go-vikunja/vikunja/commit/4e8862240c5f41f902f090f410ebe937b85da4b7) feat(frontend): add FormInput primitive component - [`2dd02a6`](https://github.com/go-vikunja/vikunja/commit/2dd02a64d223ca4c6071fca1e8edcad27af491de) feat(frontend): add FormSelect primitive component - [`5ffd073`](https://github.com/go-vikunja/vikunja/commit/5ffd073f3309721b8e942dfbb15c6c8ba0b11bba) feat(frontend): add FormCheckbox primitive component - [`0b80759`](https://github.com/go-vikunja/vikunja/commit/0b8075945c01670da12b2991693ae949bc6ccc3c) refactor(frontend): FormField supports two-col layout - [`8ccf030`](https://github.com/go-vikunja/vikunja/commit/8ccf03066c464bc6d3ad386c7256c89a6a2d9bfb) refactor(frontend): use form primitives in user settings General view - [`5e15cfe`](https://github.com/go-vikunja/vikunja/commit/5e15cfe71e324cce7f329d7a77c60c3d4d8c59f2) refactor(frontend): use form primitives in WebhookManager - [`7b277bd`](https://github.com/go-vikunja/vikunja/commit/7b277bd77bc50d8450194a7b1cdd60612bebdf3c) refactor(frontend): use FormCheckbox for remember-me on Login - [`9d31aaa`](https://github.com/go-vikunja/vikunja/commit/9d31aaa97368d4aa52b044cab8f7c1d896928ff3) fix(frontend): restore checkbox spacing and two-col layout styles - [`7fc73a5`](https://github.com/go-vikunja/vikunja/commit/7fc73a55feb632728bf0c782eeea900fed89a292) fix(frontend): restore margin between stacked FormCheckbox siblings - [`e332baa`](https://github.com/go-vikunja/vikunja/commit/e332baa69d1be864d8f99ffc11a827b20b847c05) fix(frontend): make FormCheckbox block-level so siblings drop to next line ### 📊 Changes **11 files changed** (+772 additions, -454 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/components/input/FormCheckbox.test.ts` (+42 -0) ➕ `frontend/src/components/input/FormCheckbox.vue` (+41 -0) 📝 `frontend/src/components/input/FormField.test.ts` (+26 -1) 📝 `frontend/src/components/input/FormField.vue` (+56 -39) ➕ `frontend/src/components/input/FormInput.test.ts` (+110 -0) ➕ `frontend/src/components/input/FormInput.vue` (+74 -0) ➕ `frontend/src/components/input/FormSelect.test.ts` (+82 -0) ➕ `frontend/src/components/input/FormSelect.vue` (+55 -0) 📝 `frontend/src/components/misc/WebhookManager.vue` (+28 -48) 📝 `frontend/src/views/user/Login.vue` (+5 -10) 📝 `frontend/src/views/user/settings/General.vue` (+253 -356) </details> ### 📄 Description Introduces `FormInput`, `FormSelect`, and `FormCheckbox` primitives alongside a reshaped `FormField` (now supporting a `two-col` layout) so settings pages stop hand-rolling Bulma `.field`/`.control`/`.input`/`.select` markup — making a future Bulma removal a scoped, per-primitive change. Migrates: `General.vue` (31 fields), `WebhookManager.vue`, and the remember-me checkbox on `Login.vue`. `ApiTokens.vue`, `EditTeam.vue`, `Register.vue`, and `PasswordReset.vue` either already use `FormField` or contain only composite layouts that don't fit the primitives cleanly; left for the follow-up migration. ## Test plan - Open **Settings → General** and verify every row renders, inputs/selects/checkboxes work, and saving persists. - Open a project's **Webhooks** and exercise the create form (target URL, secret, basic-auth toggle). - Log in with "remember me" toggled on. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-16 13:52:08 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#5784