Skip to content

Commit

Permalink
Add docs input CheckboxList::class. (#302)
Browse files Browse the repository at this point in the history
  • Loading branch information
terabytesoftw committed Feb 16, 2024
1 parent 59f57d2 commit 4d73967
Show file tree
Hide file tree
Showing 9 changed files with 335 additions and 92 deletions.
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ This is particularly useful for creating forms and other interactive elements on
- [button](/docs/form/input/Button.md)
- [button-group](/docs/form/input/ButtonGroup.md)
- [checkbox](/docs/form/input/Checkbox.md)
- [checkbox-list](/docs/form/input/CheckboxList.md)
- [date](/docs/form/input/Date.md)
- [datetime](/docs/form/input/Datetime.md)
- [datetime-local](/docs/form/input/DatetimeLocal.md)
Expand Down
18 changes: 16 additions & 2 deletions docs/form/input/Checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,22 @@ if you want to include a label, use the `labelContent` method.
$checkbox->labelContent('MyLabel');
```

## Adding enclosed by label

if you want to include the `checkbox` enclosed by the `label` element, use the `enclosedByLabel` method.

```php
$checkbox->enclosedByLabel(true);
```

## Adding hidden input

if you want to include a hidden input, use the `uncheckValue` method.

```php
$checkbox->uncheckValue('MyValue');
```

## Rendering

Generate the `HTML` output using the `render` method, for simple instantiation.
Expand Down Expand Up @@ -149,9 +165,7 @@ The following methods are available for setting attributes:
| `id()` | Set the `id` attribute. |
| `lang()` | Set the `lang` attribute. |
| `name()` | Set the `name` attribute. |
| `placeholder()` | Set the `placeholder` attribute. |
| `readOnly()` | Set the `readonly` attribute. |
| `size()` | Set the `size` attribute. |
| `style()` | Set the `style` attribute. |
| `tabIndex()` | Set the `tabindex` attribute. |
| `title()` | Set the `title` attribute. |
Expand Down
209 changes: 209 additions & 0 deletions docs/form/input/CheckboxList.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
# CheckboxList

Generates a list of checkbox buttons.

A checkbox is a graphical control element that allows the user to choose one or more options from a predefined set of
mutually exclusive options.

## Basic Usage

Instantiate the `CheckboxList` class using `CheckboxList::widget()`.

```php
$checkboxList = CheckboxList::widget();
```

## Generate field id and name

The `generateField` method is used to generate the field id and name for the `HTML` output.

Allowed arguments are:

- `modelName` - The name of the model.
- `fieldName` - The name of the field.
- `arrayable` - Whether the field is an array. For default, it is `false`.

```php
// generate field id and name
$checkboxList->generateField('model', 'field');
```

## Adding items

Use the `items` method to add items to the checkbox list.

```php
$checkboxList->items(
Checkbox::widget()->labelContent('Apple')->value(1),
Checkbox::widget()->labelContent('Banana')->value(2),
Checkbox::widget()->labelContent('Orange')->value(3),
);
```

## Setting Attributes

Use the provided methods to set specific attributes for the a element.

```php
// setting class attribute
$checkboxList->class('container');
```

Or, use the `attributes` method to set multiple attributes at once.

```php
$checkboxList->attributes(['class' => 'container', 'style' => 'background-color: #eee;']);
```

## Adding checked

if you want to include the `checked` attribute, use the `checked` method.

```php
$checkboxList->checked(true);
```

Or add value for matching with the `checkbox` value attribute.

```php
$checkboxList->checked('MyValue')->value('MyValue');
```

For multiple checkboxes, use the `checked` method with the value to be checked.

```php
$checkboxList->checked([1, 3]);
```

## Adding label

if you want to include a label, use the `labelContent` method.

```php
$checkboxList->labelContent('MyLabel');
```

## Adding enclosed by label

if you want to include the `checkbox` enclosed by the `label` element, use the `enclosedByLabel` method.

```php
$checkboxList->enclosedByLabel(true);
```

## Adding hidden input

if you want to include a hidden input, use the `uncheckValue` method.

```php
$checkboxList->uncheckValue('MyValue');
```

## Rendering

Generate the `HTML` output using the `render` method, for simple instantiation.

```php
$html = $checkboxList->render();
```

Or, use the magic `__toString` method.

```php
$html = (string) $checkboxList;
```

## Common use cases

Below are examples of common use cases:

```php
// adding multiple attributes
$checkboxList->class('external')->value('Myvalue');
```

Explore additional methods for setting various attributes such as `lang`, `name`, `style`, `title`, etc.

## Template

The `template` method allows you to customize the `HTML` output of the a element.

The following template tags are available:

| Tag | Description |
| --------- | ------------------ |
| `{label}` | The label element. |
| `{tag}` | The a element. |

```php
// using a custom template
$checkboxList->template('<div>{tag}</div>');
```

## Attributes

Refer to the [Attribute Tests](https://github.com/php-forge/html/blob/main/tests/Input/CheckboxList/AttributeTest.php)
for comprehensive examples.

The following methods are available for setting attributes:

| Method | Description |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| `ariaDescribedBy()`| Set the `aria-describedby` attribute. |
| `ariaLabel()` | Set the `aria-label` attribute. |
| `attributes()` | Set multiple `attributes` at once. |
| `autofocus()` | Set the `autofocus` attribute. |
| `checked()` | Set the `checked` attribute. |
| `class()` | Set the `class` attribute. |
| `id()` | Set the `id` attribute. |
| `name()` | Set the `name` attribute. |
| `style()` | Set the `style` attribute. |
| `tabIndex()` | Set the `tabindex` attribute. |

## Custom methods

Refer to the [Custom Methods Tests](https://github.com/php-forge/html/blob/main/tests/Input/CheckboxList/CustomMethodTest.php)
for comprehensive examples.

The following methods are available for customizing the `HTML` output:

| Method | Description |
| ---------------------------- | ------------------------------------------------------------------------------------- |
| `container()` | Set enabled or disabled for the `container` element. |
| `containerAttributes()` | Set `attributes` for the `container` element. |
| `containerClass()` | Set the `class` attribute for the `container` element. |
| `containerTag()` | Set the `tag` for the `container` element. |
| `enclosedByLabel()` | Set enabled or disabled for the `enclosed-by-label` element. |
| `generateField()` | Generate the field id and name for the `HTML` output. |
| `items()` | Set the `items` for the `HTML` output. |
| `render()` | Generates the `HTML` output. |
| `separator()` | Set the `separator` for the `HTML` output. |
| `template()` | Set the template for the `HTML` output. |
| `uncheckAttributes()` | Set the attributes for the hidden input tag. |
| `uncheckClass()` | Set the `class` attribute for the hidden input tag. |
| `uncheckValue()` | Set the `value` attribute for the hidden input tag. |
| `widget()` | Instantiates the `CheckboxList::class`. |

## Label methods

Refer to the [Label Tests](https://github.com/php-forge/html/blob/main/tests/Input/CheckboxList/LabelTest.php) for
comprehensive examples.

The following methods are available for customizing the `HTML` output:

| Method | Description |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| `labelAttributes()`| Set `attributes` for the `label` element. |
| `labelClass()` | Set the `class` attribute for the `label` element. |
| `labelContent()` | Set the `content` within the `label` element. |
| `labelFor()` | Set the `for` attribute for the `label` element. |
| `notLabel()` | Set disabled for the `label` element.

## Validate methods

Refer to the [Validate Tests](https://github.com/php-forge/html/blob/main/tests/Input/CheckboxList/ValidateTest.php) for
comprehensive examples.

| Method | Description |
| -------------- | --------------------------------------------------------------------------------------------------- |
| `required()` | Set the `required` attribute. |
18 changes: 16 additions & 2 deletions docs/form/input/Radio.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,22 @@ if you want to include a label, use the `labelContent` method.
$radio->labelContent('MyLabel');
```

## Adding enclosed by label

If you want to include the `radio` element enclosed by the `label` element, use the `enclosedByLabel` method.

```php
$radio->enclosedByLabel(true);
```

## Adding hidden input

If you want to include a hidden input, use the `uncheckValue` method.

```php
$radio->uncheckValue('MyValue');
```

## Rendering

Generate the `HTML` output using the `render` method, for simple instantiation.
Expand Down Expand Up @@ -150,9 +166,7 @@ The following methods are available for setting attributes:
| `id()` | Set the `id` attribute. |
| `lang()` | Set the `lang` attribute. |
| `name()` | Set the `name` attribute. |
| `placeholder()` | Set the `placeholder` attribute. |
| `readOnly()` | Set the `readonly` attribute. |
| `size()` | Set the `size` attribute. |
| `style()` | Set the `style` attribute. |
| `tabIndex()` | Set the `tabindex` attribute. |
| `title()` | Set the `title` attribute. |
Expand Down
1 change: 0 additions & 1 deletion src/Input/Base/AbstractChoiceList.php
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ abstract class AbstractChoiceList extends Element implements
use Attribute\Input\CanBeChecked;
use Attribute\Input\CanBeRequired;
use Attribute\Input\HasName;
use Attribute\Input\HasValue;

protected array $attributes = [];
/**
Expand Down
82 changes: 0 additions & 82 deletions tests/Input/CheckboxList/AttributeTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -253,11 +253,6 @@ public function testGenerateId(): void
$this->assertStringContainsString('id="checkboxlist-', CheckboxList::widget()->render());
}

public function testGetValue(): void
{
$this->assertSame('value', CheckboxList::widget()->value('value')->getValue());
}

public function testId(): void
{
Assert::equalsWithoutLE(
Expand Down Expand Up @@ -308,83 +303,6 @@ public function testName(): void
);
}

public function testRender(): void
{
Assert::equalsWithoutLE(
<<<HTML
<div id="checkboxlist-65858c272ea89">
<input id="checkbox-6599b6a33dd96" name="CheckboxForm[text][]" type="checkbox" value="1">
<label for="checkbox-6599b6a33dd96">Apple</label>
<input id="checkbox-6599b6a33dd98" name="CheckboxForm[text][]" type="checkbox" value="2">
<label for="checkbox-6599b6a33dd98">Banana</label>
<input id="checkbox-6599b6a33dd97" name="CheckboxForm[text][]" type="checkbox" value="3">
<label for="checkbox-6599b6a33dd97">Orange</label>
</div>
HTML,
CheckboxList::widget()
->id('checkboxlist-65858c272ea89')
->items(
Checkbox::widget()->id('checkbox-6599b6a33dd96')->labelContent('Apple')->value(1),
Checkbox::widget()->id('checkbox-6599b6a33dd98')->labelContent('Banana')->value(2),
Checkbox::widget()->id('checkbox-6599b6a33dd97')->labelContent('Orange')->value(3),
)
->name('CheckboxForm[text]')
->render(),
);
}

public function testRequired(): void
{
Assert::equalsWithoutLE(
<<<HTML
<div id="checkboxlist-65858c272ea89">
<input id="checkbox-6599b6a33dd96" name="CheckboxForm[text][]" type="checkbox" value="1" required>
<label for="checkbox-6599b6a33dd96">Apple</label>
<input id="checkbox-6599b6a33dd98" name="CheckboxForm[text][]" type="checkbox" value="2" required>
<label for="checkbox-6599b6a33dd98">Banana</label>
<input id="checkbox-6599b6a33dd97" name="CheckboxForm[text][]" type="checkbox" value="3" required>
<label for="checkbox-6599b6a33dd97">Orange</label>
</div>
HTML,
CheckboxList::widget()
->required()
->id('checkboxlist-65858c272ea89')
->items(
Checkbox::widget()->id('checkbox-6599b6a33dd96')->required()->labelContent('Apple')->value(1),
Checkbox::widget()->id('checkbox-6599b6a33dd98')->required()->labelContent('Banana')->value(2),
Checkbox::widget()->id('checkbox-6599b6a33dd97')->required()->labelContent('Orange')->value(3),
)
->name('CheckboxForm[text]')
->render(),
);
}

public function testSeparator(): void
{
Assert::equalsWithoutLE(
<<<HTML
<div id="checkboxlist-65858c272ea89">
<input id="checkbox-6599b6a33dd96" name="CheckboxForm[text][]" type="checkbox" value="1">
<label for="checkbox-6599b6a33dd96">Apple</label>
<input id="checkbox-6599b6a33dd98" name="CheckboxForm[text][]" type="checkbox" value="2">
<label for="checkbox-6599b6a33dd98">Banana</label>
<input id="checkbox-6599b6a33dd97" name="CheckboxForm[text][]" type="checkbox" value="3">
<label for="checkbox-6599b6a33dd97">Orange</label>
</div>
HTML,
CheckboxList::widget()
->id('checkboxlist-65858c272ea89')
->items(
Checkbox::widget()->id('checkbox-6599b6a33dd96')->labelContent('Apple')->value(1),
Checkbox::widget()->id('checkbox-6599b6a33dd98')->labelContent('Banana')->value(2),
Checkbox::widget()->id('checkbox-6599b6a33dd97')->labelContent('Orange')->value(3),
)
->name('CheckboxForm[text]')
->separator(PHP_EOL)
->render(),
);
}

public function testTabindex(): void
{
Assert::equalsWithoutLE(
Expand Down

0 comments on commit 4d73967

Please sign in to comment.