mirror of
https://github.com/discourse/discourse.git
synced 2024-12-21 08:13:44 +08:00
2ca06ba236
This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms.
1. **Form Component**:
- The main component that encapsulates form logic and structure.
- Yields various utilities like `Field`, `Submit`, `Alert`, etc.
**Example Usage**:
```gjs
import Form from "discourse/form";
<template>
<Form as |form|>
<form.Field
@name="username"
@title="Username"
@validation="required"
as |field|
>
<field.Input />
</form.Field>
<form.Field @name="age" @title="Age" as |field|>
<field.Input @type="number" />
</form.Field>
<form.Submit />
</Form>
</template>
```
2. **Validation**:
- Built-in validation rules such as `required`, `number`, `length`, and `url`.
- Custom validation callbacks for more complex validation logic.
**Example Usage**:
```javascript
validateUsername(name, value, data, { addError }) {
if (data.bar / 2 === value) {
addError(name, "That's not how maths work.");
}
}
```
```hbs
<form.Field @name="username" @validate={{this.validateUsername}} />
```
3. **Customization**:
- Plugin outlets for extending form functionality.
- Styling capabilities through propagated attributes.
- Custom controls with properties provided by `form` and `field`.
**Example Usage**:
```hbs
<Form class="my-form" as |form|>
<form.Field class="my-field" as |field|>
<MyCustomControl id={{field.id}} @onChange={{field.set}} />
</form.Field>
</Form>
```
4. **Helpers for Testing**:
- Test assertions for form and field validation.
**Example usage**:
```javascript
assert.form().hasErrors("the form shows errors");
assert.form().field("foo").hasValue("bar", "user has set the value");
```
- Helper for interacting with he form
**Example usage**:
```javascript
await formKit().field("foo").fillIn("bar");
```
5. **Page Object for System Specs**:
- Page objects for interacting with forms in system specs.
- Methods for submitting forms, checking alerts, and interacting with fields.
**Example Usage**:
```ruby
form = PageObjects::Components::FormKit.new(".my-form")
form.submit
expect(form).to have_an_alert("message")
```
**Field Interactions**:
```ruby
field = form.field("foo")
expect(field).to have_value("bar")
field.fill_in("bar")
```
6. **Collections handling**:
- A specific component to handle array of objects
**Example Usage**:
```gjs
<Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|>
<form.Collection @name="foo" as |collection|>
<collection.Field @name="bar" @title="Bar" as |field|>
<field.Input />
</collection.Field>
</form.Collection>
</Form>
```
102 lines
3.0 KiB
YAML
102 lines
3.0 KiB
YAML
en:
|
|
js:
|
|
styleguide:
|
|
title: "Styleguide"
|
|
welcome: "To get started, choose a section from the menu on the left."
|
|
|
|
categories:
|
|
syntax: Syntax
|
|
atoms: Atoms
|
|
molecules: Molecules
|
|
organisms: Organisms
|
|
|
|
sections:
|
|
bem:
|
|
title: "BEM"
|
|
typography:
|
|
title: "Typography"
|
|
example: "Welcome to Discourse"
|
|
paragraph: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|
|
date_time_inputs:
|
|
title: "Date/Time inputs"
|
|
menus:
|
|
title: "Menus"
|
|
toasts:
|
|
title: "Toasts"
|
|
font_scale:
|
|
title: "Font System"
|
|
colors:
|
|
title: "Colors"
|
|
icons:
|
|
title: "Icons"
|
|
full_list: "See the full list of Font Awesome Icons"
|
|
forms:
|
|
title: "Forms"
|
|
buttons:
|
|
title: "Buttons"
|
|
dropdowns:
|
|
title: "Dropdowns"
|
|
categories:
|
|
title: "Categories"
|
|
bread_crumbs:
|
|
title: "Bread Crumbs"
|
|
navigation:
|
|
title: "Navigation"
|
|
navigation_bar:
|
|
title: "Navigation Bar"
|
|
navigation_stacked:
|
|
title: "Navigation Stacked"
|
|
categories_list:
|
|
title: "Categories List"
|
|
topic_link:
|
|
title: "Topic Link"
|
|
topic_list_item:
|
|
title: "Topic List Item"
|
|
topic_statuses:
|
|
title: "Topic Statuses"
|
|
topic_list:
|
|
title: "Topic List"
|
|
basic_topic_list:
|
|
title: "Basic Topic List"
|
|
footer_message:
|
|
title: "Footer Message"
|
|
signup_cta:
|
|
title: "Signup CTA"
|
|
topic_timer_info:
|
|
title: "Topic Timers"
|
|
topic_footer_buttons:
|
|
title: "Topic Footer Buttons"
|
|
topic_notifications:
|
|
title: "Topic Notifications"
|
|
post:
|
|
title: "Post"
|
|
topic_map:
|
|
title: "Topic Map"
|
|
site_header:
|
|
title: "Site Header"
|
|
suggested_topics:
|
|
title: "Suggested Topics"
|
|
post_menu:
|
|
title: "Post Menu"
|
|
modal:
|
|
title: "Modal"
|
|
header: "Modal Title"
|
|
footer: "Modal Footer"
|
|
user_about:
|
|
title: "User About Box"
|
|
header_icons:
|
|
title: "Header Icons"
|
|
spinners:
|
|
title: "Spinners"
|
|
empty_state:
|
|
title: "Empty State"
|
|
tooltips:
|
|
title: "Tooltips"
|
|
description: "Description"
|
|
header: "Header"
|
|
hover_to_see: "Hover to see a tooltip"
|
|
char_counter:
|
|
title: "Character Counter"
|
|
placeholder: "Enter your text here..."
|
|
|