Download the PHP package nh/bs-component without Composer

On this page you can find all versions of the php package nh/bs-component. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of nh/bs-component

Informations about the package bs-component

Installation

Install the package via composer:

Add this to your packages.json

Publish the config

Javascript to include

SASS to include

Available components:

Available JS:

Components

Alert

Attribute Type Default
color string primary
closable boolean false

Blockquote

Attribute Type Default
source string null
align string start

Breadcrumb

Attribute Type Default
items array null

The keys in array are used to display the link text and the values are used for the href. The values can be an url or a route name.

Card

Attribute Type Default
title string null
footer string null

The title and the footer can also be set as slot.

Figure

Attribute Type Default
caption string null
align string start

The align is for the caption.

Loading

Attribute Type Default
type string border
color string primary
title string Loading...
size string md

The default title is the 'bs-component::button.loading' translation.

Modal

Attribute Type Default
title string null
footer string null
size string md
closable boolean false
centered boolean false
scrollable boolean false
is-static boolean false
fullscreen boolean false
fullscreen-size string null

You can load by axios the content of the modal:

Require

Modal Confirm

Attribute Type Default
color string primary
icon string null
title string null
action string #
method string POST
footer string null
size string md
centered boolean false
scrollable boolean false
fullscreen boolean false
fullscreen-size string null
with-file boolean false
btn-cancel array []
btn-confirm array []

Require

The action can be overide by the data-action attribute in the link

Customization

You can globaly customize the buttons in the 'bs-component' config file. Or you can set an array with the custom values (class,label,value) for each button.

Progress

Attribute Type Default
color string primary
value int 0
min int 0
max int 0
caption string null
stripped boolean false
animated boolean false

Toast

Attribute Type Default
title string null
time string null
img string null
closable boolean false
autohide boolean false
delay int 10000

Calendar

Display a calendar with events that are loaded per month

Attribute Type Default
color string null
events-load-url string null

Require

In the controller you must return a JSON with the events:

This is an exemple for add JS interaction on days and events:

Form Components

All the component manage the request old() value and the validation.

Here the default attributes:

Attribute Type Default
label string null
name string null
value string null
help string null
required boolean false
disabled boolean false
readonly boolean false
before string null
after string null
errorRelated string null
errorBag string null
autocomplete boolean false

You can enable the browser autocomplete only for the datalist, input and datepicker

Check

Attribute Type Default
type string checkbox
value string 1
checked boolean false
boolean boolean false

If the boolean option is set to true, a hidden input with the value opposite value is created.

CheckList

Attribute Type Default Option
disabled mixed false boolean/array
type string checkbox checkbox/radio
options array []
checked mixed [] string/array
inline boolean false

Input

Attribute Type Default Option
type string text text/number/phone/email/password
placeholder string null
size string null
step float 1
min float null
max float null

The step, min and max are only for input of type number.

Input File

Attribute Type Default
size string null
multiple boolean false

Select

Attribute Type Default Option
disabled mixed false boolean/array
readonly boolean false
options array []
size string null
selected mixed [] string/array
multiple boolean false

You can pass a multi-level array for make optgroup: 'Label' => [1 => 'Name'] If the select is readonly, the value(s) will be set in hidden field(s)

Datalist

Attribute Type Default
placeholder string null
options array []
size string null
with-hidden boolean false
hidden-name string id
hidden-field string null

You can add an hidden input with custom name and value. To activate the functionality you have to add the class .datalist. You can transform a datalist to an autocomplete: Check the JS section for more information

Require

Textarea

Attribute Type Default
placeholder string null

Color

Attribute Type Default
options array []

JS Component

Datepicker

To use the datepicker you need to install the JS plugin Flatpickr !

Attribute Type Default Option
placeholder string null
size string null
mode string single single/multiple/range
format string datetime datetime/datetime-short/date/time/time-short/db-datetime/db-date/db-time
min string null can be a date or the name of an input
max string null can be a date or the name of an input
inline boolean false
static boolean false
input-from string null
input-to string null
disabled-dates array []
events array []

You can set a min/max date or define by another input name. For range you can add 2 hidden input to set the from/to values You can set the disabled dates with an array, exemple ['2021-01-05','2021-05-11'] You can set some events dates with an array, exemple ['2021-01-05' => ['color' => 'danger'] ,'2021-05-11' => ['color' => 'warning']] Set static to true if the datepicker is in a parent with relative position

Require

Dynamic

With this component you can add/remove input to add multiple field in your form !

Attribute Type Default
legend string
listing string null
template string null
min int null
max int null
name string dynamic
type string dynamic
sortable boolean false
items array []
defaults array []
itemsDisabled array []
help string null
btnConfig string bs-component.dynamic.buttons
before string null
after string null

The legend is required. The listing and template are path to some includes views. The Drag&Drop is NOT initialize, you have to add the JS for that functionnality

Require

In the template view you have access to the $default; In the listing view you have acces to the $item

Customization:

You can globaly customize the buttons in the 'bs-component' config file or you can specify a custom config file/array to use.

Editor

To use the editor you need to install the JS plugin TipTap !

Attribute Type Default Available
label string null
name string null
value string null
help string null
required boolean false
toolbar string font|div|format|list|link|color| font|format|list|link|color|table|emoji
headings string 1|2|3 1|2|3|4|5|6
paragraphs string lead free to add any class
divs string blockquote free to add any class
formats string bold|italic|underline|strike
colors string primary|success|warning|danger free to add any class
emojis string bi-emoji-smile|bi-emoji-neutral|bi-emoji-frown|bi-emoji-heart-eyes|bi-emoji-wink|bi-hand-thumbs-up|bi-hand-thumbs-down free to add any class
error string null
errorBag string null

The name is required. The colors classes will start by .text- The emojis will have a .emoji class

For global customization of the options, you can update the config file in config.bs-component.editor

If you want to remove the headings for one editor type :headings="false"

Require

If you add some paragraphs and divs you can create a language file editor.php to display the name of your items.

For the emojis you can use the Bootstrap icon:

Checkbox all

If you need a checkbox to check all his children:

The parent checkbox need the class checkbox-all and the value xxx The children checkbox need the class checkbox-xxx

Require

Toggle switch

If you need a checkbox to show/hide some classes:

The toggle switch and div to hide/show should be wrap in a parent div

Require

Toggle select

If you need a select to toggle some elements:

The toggle switch and div to hide/show should be wrap in a parent div

You can also toggle elements via the group label:

Require

field could be option or group, depend if you want to trigger by simple option or by option group parent determine where to look for div to hide/show

Autocomplete

If you need an autocomplete datalist:

Require

HTML:

JS:

Option Type Default Informations
url string el.getAttribute('data-url') Url for the axio request (POST)
field string el.getAttribute('data-field') Field to use for the options value and input
datalist HTML el.querySelector('datalist') The datalist object
hidden.input HTML el.querySelector('.input-hidden') Input hidden to fill when option is selected
hidden.field string el.getAttribute('data-hidden-field') Field to use for the hidden input value
onChanged function function(e){} Callback function

The url must return a JSON list You can set the data-url data-field and data-hidden-field over the js option

In this exemple the #myCustomDatalist datalist options will be contruct via the url request. Exemple of datas items: { id: 1, name: 'My item', 'price': 10.00}

When the user will select an option, the Hidden field will be set with the id and the Other field will be set with the price of the JSON item.

Table link

If you need to make a row of a table as a link:

Require

HTML:

By default the class .table-link make a new TableLink. But you can customize it in JS:

The tablelink will be automatic on table with class .table-link

Table tree

If you need to make a row with children and contract/expand them:

Require

HTML:

By default the class .table-link make a new TableLink. But you can customize it in JS:

The tablelink will be automatic on table with class .table-link

All versions of bs-component with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package nh/bs-component contains the following files

Loading the files please wait ....