github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2026-09-05 20:07:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): extract ListEditor form component (#6962)

Browse Source 
Signed-off-by: Daniel Gerber <394442-gerbsen@users.noreply.gitlab.com>
Co-authored-by: Daniel Gerber <394442-gerbsen@users.noreply.gitlab.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
gerbsen
2026-08-07 11:01:43 +02:00
committed by GitHub
co-authored by Daniel Gerber Claude Opus 5
parent e1c0b37db9
commit 147bbbe278
6 changed files with 401 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/docs/92-development/03-ui.md
+20
View File
@@ -41,6 +41,26 @@ The following list contains some tools and frameworks used by the Woodpecker UI.
- [Volar & vue-tsc](https://github.com/johnsoncodehk/volar/) for type-checking in .vue file
- use the take-over mode of Volar as described by [this guide](https://github.com/johnsoncodehk/volar/discussions/471)
## Form components
Reusable form controls live in `web/src/components/form/`. They are all built to be placed inside an `InputField`, which renders the label, the optional description and a docs link, and passes down the `id` the control has to attach to its input:
```vue
<InputField :label="$t('some.label')">
<template #default="{ id }">
<TextField :id="id" v-model="value" />
</template>
<template #description>
{{ $t('some.description') }}
</template>
</InputField>
```
Besides the single-value controls (`TextField`, `NumberField`, `Checkbox`, `SelectField`, `RadioField`) there are two editors for collections:
- `ListEditor` for a list of strings, such as plugin images or usernames
- `KeyValueEditor` for a `Record<string, string>`, such as environment variables
## Messages and Translations
Woodpecker uses [Vue I18n](https://vue-i18n.intlify.dev/) as translation library. New translations have to be added to `web/src/assets/locales/en.json`. The English source file will be automatically imported into [Weblate](https://translate.woodpecker-ci.org/) (the translation system used by Woodpecker) where all other languages will be translated by the community based on the English source.