Settings

The Advanced controls package comes with a number of options to tweak the behavior of the components.

To change the settings, you first need to publish the configuration file with the command:

php please vendor:publish --tag=advanced-controls-config

#Tweaking the components' names

The configuration file has a prefixvariable that allows you to change the names of the components in your template, for instance if you have a conflict with another pre-existing component.
The prefix variable changes the name under which components get registered. If you set it to e.g. adv-, the library will prepend it to every component it registers. So every <x-button> in your code will have to become <x-adv-button>.

#Icon libraries

Throughout the package, components use the following icons:

This website is configured to use Heroicons, which is what you are seeing above.

#Selecting an icon pack

Changing the library used by your website is easy. The configuration file uses 2 variables to drive which icons get picked by components:

• The icon-packages array contains the preconfigured set of icons.
  If you want to add a new icon package, you must add a new entry under an array key of your choosing to make it available.

• Change the value of the icons variable to change which set will be used by your website.
  The value must match one of the keys in icon-packages.

In any case, you must install the icon set corresponding to your choice. Visit the Blade-icons repository for the instructions.

#Preconfigured libraries

This is the list of preconfigured sets:

• From Google Material Design icons
  
• From HeroIcons
  
• From HeroIcons (Outlined)
  
• From HeroIcons (Solid)
  
• From Phosphor icons
  

#3rd-party Javascript libraries

Some components, such as the charts, rely on external Javascript libraries to work. These libraries must be delivered to your users before the component can be initialized.

You can configure whether the libraries are delivered directly by your website or through a CDN, with some CDNs settings already available in the configuration file.

#CDN configuration

Much like the icon packages, the configuration file uses 2 variables:

• The cdn array contains the preconfigured URLs for the libraries used by components.
  You can of course add the entries for any CDN you want.

• Change the include-from variable to pick the desired source.
  If you set the value of include-from to null, components will not take care of loading the Javascript libraries for you.
  If not, the component will include the necessary code to load the library itself.

#Preconfigured CDN

On top of a local entry, which you can use if you want libraries to be delivered by your server, you have the choice between:

• cdnjs: libraries will be delivered by https://cdnjs.cloudflare.com.

• jsdelivr: libraries will be delivered by https://cdn.jsdelivr.net.

• jsdelivr-major: libraries will be delivered by https://cdn.jsdelivr.net.

The differences between jsdelivr and jsdelivr-major is explained below.

#Differences between CDNs

By default, the libraries provided under cdnjs and jsdelivr are a fixed version that will never be updated (as updates of a library means the version number must change).
In contrast, jsdelivr-major is configured to deliver the latest of a major version of a library. This means, whenever a library gets updated by its maintainers and the update gets effective in jsdelivr (which is not guarantees to be immediately after the update) that your website will automatically make use of it.
As we expect breaking changes between major versions of a library, this "auto-update" behavior stays inside the boundaries of a major version (i.e. no library will automatically switch between e.g v2.x.x to v3.x.x).

The other main difference between the CDNs is how long a resource can be cached. Typically (and subject to change by the CDN):

• cdnjs returns a cache max age of 355 days.
  This means the browser of users that have already downloaded the Javascript libraries by visiting your website or another will have to download a fresh copy only once in every 355 days.

• jsdelivr has a cache max age of 365 days.

• jsdelivr-major has a cache max age of 7 days.
  This means your users may experience a slight delay before a 3rd-party wrapper component is properly shown on page more frequently than with the other 2 configurations.
  Think of it as the cost of allowing "auto-update" of your site.