Skip to content

Commit 13f0ced

Browse files
lrljoelrljoe
committed
Major Updates
1 parent e58bfba commit 13f0ced

File tree

56 files changed

+1189
-695
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1189
-695
lines changed

‎docs/filters/filter-menu-methods.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Filter Menu Methods
3+
weight: 7
4+
---
5+
6+
You can customise the apperance/behaviour of the Filter Menu.
7+
8+
## Filter Layout
9+
10+
You can choose either a popover appearance (default) or a slide-down
11+
12+
### setFilterLayout
13+
14+
Set the filter layout for the component.
15+
16+
```php
17+
public function configure(): void
18+
{
19+
$this->setFilterLayout('slide-down');
20+
}
21+
```
22+
23+
### setFilterLayoutPopover
24+
25+
Set the filter layout to popover.
26+
27+
![Popover Menu](https://imgur.com/u4P9z4g.png)
28+
29+
```php
30+
public function configure(): void
31+
{
32+
$this->setFilterLayoutPopover();
33+
}
34+
```
35+
36+
### setFilterLayoutSlideDown
37+
38+
Set the filter layout to slide down.
39+
40+
![Slide Down](https://imgur.com/OuUjsDC.png)
41+
42+
```php
43+
public function configure(): void
44+
{
45+
$this->setFilterLayoutSlideDown();
46+
}
47+
```
48+
49+
### setFilterSlideDownDefaultStatusEnabled
50+
51+
Set the filter slide down to visible by default
52+
53+
```php
54+
public function configure(): void
55+
{
56+
// Shorthand for $this->setFilterSlideDownDefaultStatus(true)
57+
$this->setFilterSlideDownDefaultStatusEnabled();
58+
}
59+
```
60+
61+
### setFilterSlideDownDefaultStatusDisabled
62+
63+
Set the filter slide down to collapsed by default
64+
65+
```php
66+
public function configure(): void
67+
{
68+
// Shorthand for $this->setFilterSlideDownDefaultStatus(false)
69+
$this->setFilterSlideDownDefaultStatusDisabled();
70+
}
71+
```
72+
73+
---
74+
75+
## Additional Attributes
76+
77+
### setFilterPopoverAttributes
78+
79+
Allows for the customisation of the appearance of the Filter Popover Menu.
80+
81+
Note the addition of a "default-width" boolean, allowing you to customise the width more smoothly without impacting other applied classes.
82+
83+
You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.
84+
85+
You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array.
86+
87+
```php
88+
public function configure(): void
89+
{
90+
$this->setFilterPopoverAttributes(
91+
[
92+
'class' => 'w-96',
93+
'default-width' => false,
94+
'default-colors' => true,
95+
'default-styling' => true,
96+
'x-transition:enter' => 'transition ease-out duration-100',
97+
]
98+
);
99+
}
100+
```
101+
102+
### setFilterSlidedownWrapperAttributes
103+
104+
Allows for the customisation of the appearance of the Filter Slidedown Wrapper.
105+
106+
You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.
107+
108+
You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array, for example to extend the duration of the transition effect from the default duration-100 to duration-1000:
109+
110+
```php
111+
public function configure(): void
112+
{
113+
$this->setFilterSlidedownWrapperAttributes([
114+
'x-transition:enter' => 'transition ease-out duration-1000',
115+
'class' => 'text-black',
116+
'default-colors' => true,
117+
'default-styling' => true,
118+
]);
119+
}
120+
```
121+
122+
### setFilterSlidedownRowAttributes
123+
124+
Allows for the customisation of the appearance of the Filter Slidedown Row. Note that this uses a callback, which receives the "rowIndex" of the Slidedown Row
125+
126+
You may replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.
127+
128+
```php
129+
public function configure(): void
130+
{
131+
$this->setFilterSlidedownRowAttributes(fn($rowIndex) => $rowIndex % 2 === 0 ?
132+
[
133+
'class' => 'bg-red-500',
134+
'default-colors' => true,
135+
'default-styling' => true,
136+
] : [
137+
'class' => 'bg-blue-500',
138+
'default-colors' => true,
139+
'default-styling' => true,
140+
]
141+
);
142+
}
143+
```

‎docs/filters/filter-pills-methods.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Filter Pills Methods
3+
weight: 8
4+
---
5+
6+
You can customise the appearance/behaviour of the Filter Pills.
7+
8+
---
9+
10+
## setFilterPillsStatus
11+
12+
**Enabled by default**, show/hide the filter pills.
13+
14+
```php
15+
public function configure(): void
16+
{
17+
$this->setFilterPillsStatus(true);
18+
$this->setFilterPillsStatus(false);
19+
}
20+
```
21+
22+
## setFilterPillsEnabled
23+
24+
Show the filter pills for the component.
25+
26+
```php
27+
public function configure(): void
28+
{
29+
// Shorthand for $this->setFilterPillsStatus(true)
30+
$this->setFilterPillsEnabled();
31+
}
32+
```
33+
34+
## setFilterPillsDisabled
35+
36+
Hide the filter pills for the component.
37+
38+
```php
39+
public function configure(): void
40+
{
41+
// Shorthand for $this->setFilterPillsStatus(false)
42+
$this->setFilterPillsDisabled();
43+
}
44+
```
45+
46+
---
47+
48+
49+
## Customising Appearance
50+
51+
You can customise the appearance of the items in the Filter Pills
52+
53+
### setFilterPillsItemAttributes
54+
Allows for customisation of the appearance of the "Filter Pills Item"
55+
56+
Note that each filter has a setFilterPillBlade method [Here](./available-filter-methods) should you wish to customise a specific filter's pills further
57+
58+
This utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
59+
60+
#### default-colors
61+
Setting to false will disable the default colors for the Filter Pills Item, the default colors are:
62+
63+
Bootstrap: None
64+
65+
Tailwind: `bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900`
66+
67+
#### default-styling
68+
Setting to false will disable the default styling for the Filter Pills Item, the default styling is:
69+
70+
Bootstrap 4: `badge badge-pill badge-info d-inline-flex align-items-center`
71+
72+
Bootstrap 5: `badge rounded-pill bg-info d-inline-flex align-items-center`
73+
74+
Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize`
75+
76+
```php
77+
public function configure(): void
78+
{
79+
$this->setFilterPillsItemAttributes([
80+
'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the filter pills item
81+
'default-colors' => false, // Do not output the default colors
82+
'default-styling' => true // Output the default styling
83+
]);
84+
}
85+
```
86+
87+
### setFilterPillsResetFilterButtonAttributes
88+
Allows for customisation of the appearance of the "Filter Pills Reset Filter Button"
89+
90+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
91+
92+
#### default-colors
93+
Setting to false will disable the default colors for the Filter Pills Reset Filter Button, the default colors are:
94+
95+
Bootstrap: None
96+
97+
Tailwind: `text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white`
98+
99+
#### default-styling
100+
Setting to false will disable the default styling for the Filter Pills Reset Filter Button, the default styling is:
101+
102+
Bootstrap: `text-white ml-2`
103+
104+
Tailwind: `flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none`
105+
106+
```php
107+
public function configure(): void
108+
{
109+
$this->setFilterPillsResetFilterButtonAttributes([
110+
'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the filter pills reset filter button
111+
'default-colors' => false, // Do not output the default colors
112+
'default-styling' => true // Output the default styling
113+
]);
114+
}
115+
```
116+
117+
### setFilterPillsResetAllButtonAttributes
118+
Allows for customisation of the appearance of the "Filter Pills Reset All Button"
119+
120+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
121+
122+
#### default-colors
123+
Setting to false will disable the default colors for the Filter Pills Reset All Button, the default colors are:
124+
125+
Bootstrap: None
126+
127+
Tailwind: `bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900`
128+
129+
#### default-styling
130+
Setting to false will disable the default styling for the Filter Pills Reset All Button, the default styling is:
131+
132+
Bootstrap 4: `badge badge-pill badge-light`
133+
134+
Bootstrap 5: `badge rounded-pill bg-light text-dark text-decoration-none`
135+
136+
Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium`
137+
138+
```php
139+
public function configure(): void
140+
{
141+
$this->setFilterPillsResetAllButtonAttributes([
142+
'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the filter pills reset all button
143+
'default-colors' => false, // Do not output the default colors
144+
'default-styling' => true // Output the default styling
145+
]);
146+
}
147+
```

‎docs/filters/styling.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Styling
3+
weight: 9
4+
---
5+
6+
There are several styling customisation options available, please see:
7+
8+
[Filter Menu Methods](./filter-menu-methods)
9+
[Filter Pills Methods](./filter-pills-methods)
10+
[Available Filter Methods](./available-filter-methods)

0 commit comments

Comments
 (0)