Skip to content

Commit

Permalink
refactor: move html option to fields (#144)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Paul-Bob
Paul-Bob authored Dec 19, 2023
1 parent b44cfbf commit b20b9e5
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 189 deletions.
195 changes: 195 additions & 0 deletions docs/3.0/field-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,3 +411,198 @@ The components block it's executed using `Avo::ExecutionContent` and gives acces
:::warning Initializer
It's important to keep the initializer on your custom components as the original field view component initializer.
:::

:::option `html`
### Attach HTML attributes

Using the `html` option you can attach `style`, `classes`, and `data` attributes. The `style` attribute adds the `style` tag to your element, `classes` adds the `class` tag, and the `data` attribute the `data` tag to the element you choose.

Pass the `style` and `classes` attributes as strings, and the `data` attribute a Hash.

```ruby{4-11}
field :name, as: :text, html: {
edit: {
wrapper: {
style: "background: red; text: white;" # string
classes: "absolute h-[41px] w-full" # string
data: {
action: "input->resource-edit#toggle",
resource_edit_toggle_target_param: "skills_tags_wrapper",
} # Hash
}
}
}
```

#### Declare the fields from the outside in

When you add these attributes, you need to think from the outside in. So first the `view` (`index`, `show`, or `edit`), next the element to which you add the attribute (`wrapper`, `label`, `content` or `input`), and then the attribute `style`, `classes`, or `data`.

**The `edit` value will be used for both the `Edit` and `New` views.**

There are two notations through which you can attach the attributes; `object` or `block` notation.

### The `object` notation

This is the simplest way of attaching the attribute. You usually use this when you want to add _static_ content and params.

```ruby{3-9}
field :has_skills,
as: :boolean,
html: {
edit: {
wrapper: {
classes: "hidden"
}
}
}
```

In this example, we're adding the `hidden` class to the field wrapper on the `Edit` and `New` views.

### The `block` notation

You can use the' block' notation if you need to do a more complex transformation to add your attributes. You'll have access to the `params`, `current_user`, `record`, and `resource` variables. It's handy in multi-tenancy scenarios and when you need to scope out the information across accounts.

```ruby{3-18}
field :has_skills,
as: :boolean,
html: -> do
edit do
wrapper do
classes do
"hidden"
end
data do
if current_user.admin?
{
action: "click->admin#do_something_admin"
}
else
{
record: record,
resource: resource,
}
end
end
end
end
end
```

For the `data`, `style`, and `classes` options, you may use the `method` notation alongside the block notation for simplicity.

```ruby{6,7}
field :has_skills,
as: :boolean,
html: -> do
edit do
wrapper do
classes("hidden")
data({action: "click->admin#do_something_admin"})
end
end
end
```

### Where are the attributes added?

You can add attributes to the wrapper element for the `index`, `show`, or `edit` blocks.

### Index field wrapper

```ruby
field :name, as: :text, html: {
index: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/index-field-wrapper.jpg')" alt="Index field wrapper" class="border mb-4" />

### Show field wrapper

```ruby
field :name, as: :text, html: {
show: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/show-field-wrapper.jpg')" alt="Show field wrapper" class="border mb-4" />

### Show label target

```ruby
field :name, as: :text, html: {
show: {
label: {}
}
}
```

<img :src="('/assets/img/stimulus/show-label-target.jpg')" alt="Show label target" class="border mb-4" />

### Show content target

```ruby
field :name, as: :text, html: {
show: {
content: {}
}
}
```

<img :src="('/assets/img/stimulus/show-content-target.jpg')" alt="Show content target" class="border mb-4" />

### Edit field wrapper

```ruby
field :name, as: :text, html: {
edit: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-field-wrapper.jpg')" alt="Edit field wrapper" class="border mb-4" />

### Edit label target

```ruby
field :name, as: :text, html: {
edit: {
label: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-label-target.jpg')" alt="Edit label target" class="border mb-4" />

### Edit content target

```ruby
field :name, as: :text, html: {
edit: {
content: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-content-target.jpg')" alt="Edit content target" class="border mb-4" />

### Edit input target

```ruby
field :name, as: :text, html: {
edit: {
input: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-input-target.jpg')" alt="Index field wrapper" class="border mb-4" />

:::
190 changes: 1 addition & 189 deletions docs/3.0/stimulus-integration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,195 +152,7 @@ Same way, the controllers will not receive the `view` attribute in the DOM, [as

## Attach HTML attributes

Using the `html` option you can attach `style`, `classes`, and `data` attributes. The `style` attribute adds the `style` tag to your element, `classes` adds the `class` tag, and the `data` attribute the `data` tag to the element you choose.

Pass the `style` and `classes` attributes as strings, and the `data` attribute a Hash.

```ruby{4-11}
field :name, as: :text, html: {
edit: {
wrapper: {
style: "background: red; text: white;" # string
classes: "absolute h-[41px] w-full" # string
data: {
action: "input->resource-edit#toggle",
resource_edit_toggle_target_param: "skills_tags_wrapper",
} # Hash
}
}
}
```

### Declare the fields from the outside in

When you add these attributes, you need to think from the outside in. So first the `view` (`index`, `show`, or `edit`), next the element to which you add the attribute (`wrapper`, `label`, `content` or `input`), and then the attribute `style`, `classes`, or `data`.

**The `edit` value will be used for both the `Edit` and `New` views.**

There are two notations through which you can attach the attributes; `object` or `block` notation.

## The `object` notation

This is the simplest way of attaching the attribute. You usually use this when you want to add _static_ content and params.

```ruby{3-9}
field :has_skills,
as: :boolean,
html: {
edit: {
wrapper: {
classes: "hidden"
}
}
}
```

In this example, we're adding the `hidden` class to the field wrapper on the `Edit` and `New` views.

## The `block` notation

You can use the' block' notation if you need to do a more complex transformation to add your attributes. You'll have access to the `params`, `current_user`, `record`, and `resource` variables. It's handy in multi-tenancy scenarios and when you need to scope out the information across accounts.

```ruby{3-18}
field :has_skills,
as: :boolean,
html: -> do
edit do
wrapper do
classes do
"hidden"
end
data do
if current_user.admin?
{
action: "click->admin#do_something_admin"
}
else
{
record: record,
resource: resource,
}
end
end
end
end
end
```

For the `data`, `style`, and `classes` options, you may use the `method` notation alongside the block notation for simplicity.

```ruby{6,7}
field :has_skills,
as: :boolean,
html: -> do
edit do
wrapper do
classes("hidden")
data({action: "click->admin#do_something_admin"})
end
end
end
```

## Where are the attributes added?

You can add attributes to the wrapper element for the `index`, `show`, or `edit` blocks.

## Index field wrapper

```ruby
field :name, as: :text, html: {
index: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/index-field-wrapper.jpg')" alt="Index field wrapper" class="border mb-4" />

## Show field wrapper

```ruby
field :name, as: :text, html: {
show: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/show-field-wrapper.jpg')" alt="Show field wrapper" class="border mb-4" />

## Show label target

```ruby
field :name, as: :text, html: {
show: {
label: {}
}
}
```

<img :src="('/assets/img/stimulus/show-label-target.jpg')" alt="Show label target" class="border mb-4" />

## Show content target

```ruby
field :name, as: :text, html: {
show: {
content: {}
}
}
```

<img :src="('/assets/img/stimulus/show-content-target.jpg')" alt="Show content target" class="border mb-4" />

## Edit field wrapper

```ruby
field :name, as: :text, html: {
edit: {
wrapper: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-field-wrapper.jpg')" alt="Edit field wrapper" class="border mb-4" />

## Edit label target

```ruby
field :name, as: :text, html: {
edit: {
label: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-label-target.jpg')" alt="Edit label target" class="border mb-4" />

## Edit content target

```ruby
field :name, as: :text, html: {
edit: {
content: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-content-target.jpg')" alt="Edit content target" class="border mb-4" />

## Edit input target

```ruby
field :name, as: :text, html: {
edit: {
input: {}
}
}
```

<img :src="('/assets/img/stimulus/edit-input-target.jpg')" alt="Index field wrapper" class="border mb-4" />
[This section has moved.](./field-options#html)

## Composing the attributes together

Expand Down

0 comments on commit b20b9e5

Please sign in to comment.