Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 5f923ec

Browse files
rawilkrawilk
committed
Add directives for linking to 3rd party styles/scripts
1 parent c0c0f6b commit 5f923ec

File tree

9 files changed

+150
-285
lines changed

9 files changed

+150
-285
lines changed

‎README.md‎

Lines changed: 1 addition & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -25,149 +25,7 @@ php artisan fc:publish
2525
php artisan fc:publish --views
2626
```
2727

28-
This is the contents of the published config file:
29-
30-
```php
31-
use Rawilk\FormComponents\Components;
32-
33-
return [
34-
/*
35-
|--------------------------------------------------------------------------
36-
| Components
37-
|--------------------------------------------------------------------------
38-
|
39-
| Below you reference all form components that should be loaded for your
40-
| app. By default all components from laravel-form-components are loaded
41-
| in. You can disable or overwrite any component class or alias that
42-
| you want.
43-
|
44-
*/
45-
'components' => [
46-
47-
'form' => [
48-
'class' => Components\Form::class,
49-
'view' => 'form-components::components.form',
50-
],
51-
52-
'input' => [
53-
'class' => Components\Inputs\Input::class,
54-
'view' => 'form-components::components.inputs.input',
55-
],
56-
57-
'email' => [
58-
'class' => Components\Inputs\Email::class,
59-
'view' => 'form-components::components.inputs.input',
60-
],
61-
62-
'password' => [
63-
'class' => Components\Inputs\Password::class,
64-
'view' => 'form-components::components.inputs.password',
65-
66-
/*
67-
* This icon will show when the password is masked and show toggle is enabled.
68-
* Can be overridden individually as well.
69-
*/
70-
'show_password_icon' => 'heroicon-s-eye',
71-
72-
/*
73-
* This icon will show when the password is un-masked and show toggle is enabled.
74-
* Can be overridden individually as well.
75-
*/
76-
'hide_password_icon' => 'heroicon-o-eye-off',
77-
],
78-
79-
'textarea' => [
80-
'class' => Components\Inputs\Textarea::class,
81-
'view' => 'form-components::components.inputs.textarea',
82-
],
83-
84-
'checkbox' => [
85-
'class' => Components\Choice\Checkbox::class,
86-
'view' => 'form-components::components.choice.checkbox-or-radio',
87-
],
88-
89-
'radio' => [
90-
'class' => Components\Choice\Radio::class,
91-
'view' => 'form-components::components.choice.checkbox-or-radio',
92-
],
93-
94-
'select' => [
95-
'class' => Components\Inputs\Select::class,
96-
'view' => 'form-components::components.inputs.select',
97-
],
98-
99-
'label' => [
100-
'class' => Components\Label::class,
101-
'view' => 'form-components::components.label',
102-
],
103-
104-
'checkbox-group' => [
105-
'class' => Components\Choice\CheckboxGroup::class,
106-
'view' => 'form-components::components.choice.checkbox-group',
107-
],
108-
109-
'form-group' => [
110-
'class' => Components\FormGroup::class,
111-
'view' => 'form-components::components.form-group',
112-
],
113-
114-
'form-error' => [
115-
'class' => Components\FormError::class,
116-
'view' => 'form-components::components.form-error',
117-
],
118-
119-
'timezone-select' => [
120-
'class' => Components\Inputs\TimezoneSelect::class,
121-
'view' => 'form-components::components.inputs.timezone-select',
122-
],
123-
124-
],
125-
126-
/*
127-
|--------------------------------------------------------------------------
128-
| Prefix
129-
|--------------------------------------------------------------------------
130-
|
131-
| This value will set a prefix for all laravel-form-components blade
132-
| components. By default it's empty. This is useful if you want to avoid
133-
| collision with components from other libraries.
134-
|
135-
| If set with "tw", for example, you can reference components like:
136-
|
137-
| <x-tw-form />
138-
|
139-
*/
140-
'prefix' => '',
141-
142-
/*
143-
|--------------------------------------------------------------------------
144-
| Enable Timezone Select
145-
|--------------------------------------------------------------------------
146-
|
147-
| If you don't plan on using a timezone select in your app, you can disable
148-
| it here. This will prevent the use of app('fc-timezone'). You should also
149-
| remove the "timezone-select" from the registered components in the config
150-
| as well.
151-
|
152-
*/
153-
'enable_timezone' => true,
154-
155-
/*
156-
|--------------------------------------------------------------------------
157-
| Default Timezone Subset
158-
|--------------------------------------------------------------------------
159-
|
160-
| You may not always need the full list of timezones to choose from,
161-
| so you may define a subset of regions to pull from instead. Set
162-
| the value to `false` to use all regions.
163-
|
164-
| Example: [\Rawilk\FormComponents\Support\TimezoneRegion::AMERICA]
165-
|
166-
*/
167-
'timezone_subset' => false,
168-
169-
];
170-
```
28+
You can view the default configuration here: https://github.com/rawilk/laravel-form-components/blob/master/config/form-components.php
17129

17230
## Documentation
17331

‎composer.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"Tailwind",
88
"form",
99
"Laravel",
10-
"Blade"
10+
"Blade",
11+
"date picker"
1112
],
1213
"homepage": "https://github.com/rawilk/laravel-form-components",
1314
"license": "MIT",

‎config/form-components.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,4 +154,23 @@
154154
*/
155155
'timezone_subset' => false,
156156

157+
/*
158+
|--------------------------------------------------------------------------
159+
| Third Party Asset Libraries
160+
|--------------------------------------------------------------------------
161+
|
162+
| These settings hold reference to all third party libraries and their
163+
| asset files served through a CDN. Individual components can require
164+
| these asset files through their static `$assets` property.
165+
|
166+
*/
167+
'assets' => [
168+
'alpine' => 'https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js',
169+
170+
'flatpickr' => [
171+
'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css',
172+
'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js',
173+
],
174+
],
175+
157176
];

‎docs/components/date-picker.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ By using it, you can simply add a date and/or time picker to your form with one
1010

1111
## Installation
1212

13-
We recommend that you install and compile the JavaScript libraries before you deploy to production:
13+
While the `date-picker` component works out-of-the-box when you've [set the directives](/docs/laravel-form-components/v1/installation#directives),
14+
we recommend that you install and compile the JavaScript libraries before you deploy to production:
1415

1516
- [Alpine.js](https://github.com/alpinejs/alpine) `^2.7`
1617
- [Flatpickr](https://flatpickr.js.org/) `4.6.3`

‎docs/installation.md‎

Lines changed: 27 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -19,150 +19,38 @@ You may publish the config file via:
1919
php artisan fc:publish
2020
```
2121

22-
This is the default configuration:
22+
[Click here](https://github.com/rawilk/laravel-form-components/blob/master/config/form-components.php) to view the default configuration.
2323

24-
```php
25-
use Rawilk\FormComponents\Components;
24+
## Directives
2625

27-
return [
28-
/*
29-
|--------------------------------------------------------------------------
30-
| Components
31-
|--------------------------------------------------------------------------
32-
|
33-
| Below you reference all form components that should be loaded for your
34-
| app. By default all components from laravel-form-components are loaded
35-
| in. You can disable or overwrite any component class or alias that
36-
| you want.
37-
|
38-
*/
39-
'components' => [
40-
41-
'form' => [
42-
'class' => Components\Form::class,
43-
'view' => 'form-components::components.form',
44-
],
45-
46-
'input' => [
47-
'class' => Components\Inputs\Input::class,
48-
'view' => 'form-components::components.inputs.input',
49-
],
50-
51-
'email' => [
52-
'class' => Components\Inputs\Email::class,
53-
'view' => 'form-components::components.inputs.input',
54-
],
55-
56-
'password' => [
57-
'class' => Components\Inputs\Password::class,
58-
'view' => 'form-components::components.inputs.password',
59-
60-
/*
61-
* This icon will show when the password is masked and show toggle is enabled.
62-
* Can be overridden individually as well.
63-
*/
64-
'show_password_icon' => 'heroicon-s-eye',
65-
66-
/*
67-
* This icon will show when the password is un-masked and show toggle is enabled.
68-
* Can be overridden individually as well.
69-
*/
70-
'hide_password_icon' => 'heroicon-o-eye-off',
71-
],
72-
73-
'textarea' => [
74-
'class' => Components\Inputs\Textarea::class,
75-
'view' => 'form-components::components.inputs.textarea',
76-
],
77-
78-
'checkbox' => [
79-
'class' => Components\Choice\Checkbox::class,
80-
'view' => 'form-components::components.choice.checkbox-or-radio',
81-
],
82-
83-
'radio' => [
84-
'class' => Components\Choice\Radio::class,
85-
'view' => 'form-components::components.choice.checkbox-or-radio',
86-
],
87-
88-
'select' => [
89-
'class' => Components\Inputs\Select::class,
90-
'view' => 'form-components::components.inputs.select',
91-
],
92-
93-
'label' => [
94-
'class' => Components\Label::class,
95-
'view' => 'form-components::components.label',
96-
],
97-
98-
'checkbox-group' => [
99-
'class' => Components\Choice\CheckboxGroup::class,
100-
'view' => 'form-components::components.choice.checkbox-group',
101-
],
102-
103-
'form-group' => [
104-
'class' => Components\FormGroup::class,
105-
'view' => 'form-components::components.form-group',
106-
],
107-
108-
'form-error' => [
109-
'class' => Components\FormError::class,
110-
'view' => 'form-components::components.form-error',
111-
],
112-
113-
'timezone-select' => [
114-
'class' => Components\Inputs\TimezoneSelect::class,
115-
'view' => 'form-components::components.inputs.timezone-select',
116-
],
117-
118-
],
119-
120-
/*
121-
|--------------------------------------------------------------------------
122-
| Prefix
123-
|--------------------------------------------------------------------------
124-
|
125-
| This value will set a prefix for all laravel-form-components blade
126-
| components. By default it's empty. This is useful if you want to avoid
127-
| collision with components from other libraries.
128-
|
129-
| If set with "tw", for example, you can reference components like:
130-
|
131-
| <x-tw-form />
132-
|
133-
*/
134-
'prefix' => '',
135-
136-
/*
137-
|--------------------------------------------------------------------------
138-
| Enable Timezone Select
139-
|--------------------------------------------------------------------------
140-
|
141-
| If you don't plan on using a timezone select in your app, you can disable
142-
| it here. This will prevent the use of app('fc-timezone'). You should also
143-
| remove the "timezone-select" from the registered components in the config
144-
| as well.
145-
|
146-
*/
147-
'enable_timezone' => true,
148-
149-
/*
150-
|--------------------------------------------------------------------------
151-
| Default Timezone Subset
152-
|--------------------------------------------------------------------------
153-
|
154-
| You may not always need the full list of timezones to choose from,
155-
| so you may define a subset of regions to pull from instead. Set
156-
| the value to `false` to use all regions.
157-
|
158-
| Example: [\Rawilk\FormComponents\Support\TimezoneRegion::AMERICA]
159-
|
160-
*/
161-
'timezone_subset' => false,
26+
One of the biggest advantages to `laravel-form-components` is that almost all of its components come ready
27+
out-of-the-box. To achieve this, Laravel Form Components makes use of CDNs from
28+
any 3rd party library that a component might need. To make sure these CDNs are
29+
included in your HTML, you can make use of the `@fcStyles` and `@fcScripts` directives.
16230

163-
];
31+
Place the `@fcStyles` in the `<head>` before any of your other styles. Place the `@fcScripts` directive right before
32+
your closing `</body>` tag and **after** scripts from libraries like Livewire.
33+
34+
**Note:** The `@fcStyles` directives **does not** include styles generated by Laravel Form Components. You will still need to include
35+
those in [a stylesheet manually](#styling).
36+
37+
## Production
38+
39+
Even though these directives allow you to get up and running with the components quickly, **we recommend that you compile the 3rd
40+
party libraries that each component needs through an asset pipeline** (like [Laravel Mix](https://github.com/JeffreyWay/laravel-mix)).
41+
By default, when your `app.debug` config option is disabled, the directives are also disabled for performance reasons.
42+
43+
If you always want these directives to be executed, even when `app.debug` is disabled, you can force them to load the CDN
44+
links by passing a `true` boolean:
45+
46+
```html
47+
@fcStyles(true)
48+
@fcScripts(true)
16449
```
16550

51+
Libraries are only loaded for components that are enabled through the `components` config option. You can learn more about
52+
[disabling specific components](#components) below.
53+
16654
## Views
16755

16856
You may override the views, either by using your own views and specifying them in the config, or by publishing the package's views:

‎src/Components/Inputs/DatePicker.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
class DatePicker extends Input
88
{
9+
protected static array $assets = ['alpine', 'flatpickr'];
10+
911
public array $options;
1012
public $toggleIcon;
1113
public $clearIcon;

‎src/Components/Inputs/Password.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
class Password extends Input
88
{
9+
protected static array $assets = ['alpine'];
10+
911
public bool $showToggle;
1012
public ?string $showPasswordIcon;
1113
public ?string $hidePasswordIcon;

0 commit comments

Comments
 (0)