berlin-bird-studios / blade-components
This package provides a set of blade components
Requires (Dev)
- orchestra/testbench: ^7.6
- dev-main
- v1.0.73
- v1.0.72
- v1.0.71
- v1.0.70
- v1.0.69
- v1.0.68
- v1.0.67
- v1.0.66
- v1.0.65
- v1.0.64
- v1.0.63
- v1.0.62
- v1.0.61
- v1.0.60
- v1.0.59
- v1.0.58
- v1.0.57
- v1.0.56
- v1.0.55
- v1.0.54
- v1.0.53
- v1.0.52
- v1.0.51
- v1.0.50
- v1.0.49
- v1.0.48
- v1.0.47
- v1.0.46
- v1.0.45
- v1.0.44
- v1.0.43
- v1.0.42
- v1.0.41
- v1.0.40
- v1.0.39
- v1.0.38
- v1.0.37
- v1.0.36
- v1.0.35
- v1.0.34
- v1.0.33
- v1.0.32
- v1.0.31
- v1.0.30
- v1.0.29
- v1.0.28
- v1.0.27
- v1.0.26
- v1.0.25
- v1.0.24
- v1.0.23
- v1.0.22
- v1.0.21
- v1.0.20
- v1.0.19
- v1.0.18
- v1.0.17
- v1.0.16
- v1.0.15
- v1.0.14
- v1.0.13
- v1.0.12
- v1.0.11
- v1.0.10
- v1.0.9
- v1.0.8
- v1.0.7
- v1.0.6
- v1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- v1.0.1
- v1.0.0
- dev-add-cloud-cmp
- dev-feature/add-tagcloud-readme
This package is auto-updated.
Last update: 2025-05-04 22:45:53 UTC
README
This package provides a set of reusable Blade components for Laravel applications. It simplifies the creation of UI elements and includes commands to generate listings and slide-over components with ease.
Table of Contents
Features
- Predefined Blade components for common UI elements.
- Commands to generate Livewire-based listings and slide-overs.
- Customizable stubs for component generation.
Installation
Install the package via Composer:
composer require berlin-bird-studios/blade-components
Publish the configuration and/or views (only if you want to modify the configuration or override the default views):
php artisan vendor:publish --tag=bbs-blade-components-config php artisan vendor:publish --tag=bbs-blade-components-views
Table of Components
- bbs-analytics.matomo
- bbs-slide-over
- bbs-input
- bbs-input.select
- bbs-input.group
- bbs-input.validation-error
- bbs-input.button
- bbs-input.textarea
- bbs-input.checkbox
- bbs-input.editor.ck
- bbs-input.editor.trix
- bbs-input.number
- bbs-input.choices
- bbs-input.datetime
- bbs-input.image
- bbs-input.image-upload.filepond
- bbs-typewriter
- bbs-scroll-top
- bbs-image-crop
- bbs-action-button.stack
- bbs-tag-cloud
Blade Components
bbs-analytics.matomo
- Description: Embeds Matomo analytics tracking code.
- Props:
siteId
: The ID of the Matomo site (default:null
).url
: The URL of the Matomo server (default:null
).
- Note: The values for
siteId
andurl
can either be passed as props or set via environment variables (MATOMO_URL
,MATOMO_SITE_ID
). - Example:
<x-bbs-analytics.matomo siteId="1" url="https://matomo.example.com" />
bbs-slide-over
- Description: A slide-over panel for displaying additional content.
- Props:
title
: The title of the slide-over.subtitle
: Subtitle text (default:null
).hideOnClickAway
: Whether to close the slide-over when clicking outside (default:false
).footerButtons
: Footer buttons content (default:false
).actionButtonText
: Text for the action button (default:false
).actionButtonMethod
: Method to call on action button click (default:false
).actionButtonParams
: Parameters for the action button method (default:null
).closeButton
: Custom close button content (default:null
).
- Example:
<x-bbs-slide-over title="My Slide-Over" :hideOnClickAway="true"> <p>Content goes here.</p> </x-bbs-slide-over>
bbs-input
- Description: A customizable input field.
- Props:
type
: The input type (default:text
).bgClasses
: Background CSS classes (default:bg-transparent
).borderClasses
: Border CSS classes (default:focus:border-gray-300 border-gray-300 focus:ring-gray-300
).
- Example:
<x-bbs-input type="text" bgClasses="bg-white" borderClasses="border-blue-500" />
bbs-input.select
- Description: A customizable select dropdown.
- Props:
borderClasses
: Border CSS classes (default:focus:ring-gray-300 focus:border-gray-300 border-gray-300
).
- Example:
<x-bbs-input.select borderClasses="border-red-500"> <option value="1">Option 1</option> <option value="2">Option 2</option> </x-bbs-input.select>
bbs-input.group
- Description: A group wrapper for input fields with label and validation error support.
- Props:
for
: Thefor
attribute for the label.label
: The label text (default:false
).shadow
: Whether to apply shadow styling (default:true
).description
: Description text (default:false
).errorFor
: The field name for validation error messages (default:null
).
- Example:
<x-bbs-input.group for="input-id" label="Input Label" description="This is a description."> <x-bbs-input type="text" /> </x-bbs-input.group>
bbs-input.validation-error
- Description: Displays validation error messages for a specific field.
- Props:
for
: The field name for validation error messages.
- Example:
<x-bbs-input.validation-error for="input-id" />
bbs-input.button
- Description: A customizable button component.
- Props:
classes
: CSS classes for the button (default:bg-blue-500 hover:bg-blue-200 ...
).
- Example:
<x-bbs-input.button classes="bg-green-500 hover:bg-green-200"> Submit </x-bbs-input.button>
bbs-input.textarea
- Description: A customizable textarea input field.
- Props:
type
: The input type (default:text
).bgClasses
: Background CSS classes (default:bg-transparent
).borderClasses
: Border CSS classes (default:focus:border-gray-300 border-gray-300 focus:ring-gray-300
).
- Example:
<x-bbs-input.textarea bgClasses="bg-white" borderClasses="border-blue-500" />
bbs-input.checkbox
- Description: A customizable checkbox input.
- Props:
borderClasses
: Border CSS classes (default:focus:ring-blue-500 border-gray-300
).textClasses
: Text CSS classes (default:text-blue-300
).
- Example:
<x-bbs-input.checkbox borderClasses="border-red-500" textClasses="text-green-500" />
bbs-input.editor.ck
- Description: A CKEditor instance with extensive customization options.
- Props:
loadFromCdn
: Whether to load CKEditor from CDN (default:true
).fontSizes
: Array of font sizes (default:[10, 12, 14, ...]
).transparent
: Whether the editor background is transparent (default:true
).toolbarItems
: Toolbar items for CKEditor (default:[heading, bold, italic, ...]
).allowedContent
: Allowed HTML content (default:p h1 h2 strong em; ...
).language
: Language for the editor (default:de
).placeholder
: Placeholder text (default:Text
).colors
: Array of color options (default:[black, red, white]
).hideToolbar
: Whether to hide the toolbar (default:false
).fontFamilies
: Array of font families (default:[Arial, Courier New, ...]
).defaultFontFamily
: Default font family (default:Arial
).
- Example:
<x-bbs-input.editor.ck language="en" placeholder="Enter your text here" />
bbs-input.editor.trix
- Description: A Trix editor with extensive customization options.
- Props:
fileUploads
: Whether to enable file uploads (default:false
).colors
: An array of colors for text formatting (default:['Schwarz' => 'rgb(0, 0, 0)', 'Weiß' => 'rgb(255, 255, 255)', 'Rot' => 'rgb(240, 15, 15)']
).transparent
: Whether the editor background is transparent (default:true
).alignButtons
: Whether to show alignment buttons (default:true
).hideToolbar
: Whether to hide the toolbar (default:false
).hideBlockTools
: Whether to hide block tools (default:true
).
- Example:
<x-bbs-input.editor.trix :fileUploads="true" :transparent="false" :alignButtons="true" />
bbs-input.number
- Description: A customizable number input field.
- Props:
bgClasses
: Background CSS classes (default:bg-transparent
).borderClasses
: Border CSS classes (default:focus:border-gray-300 border-gray-300 focus:ring-gray-300
).
- Example:
<x-bbs-input.number bgClasses="bg-white" borderClasses="border-blue-500" />
bbs-input.choices
- Description: A customizable choices dropdown with advanced options.
- Props:
name
: The name of the input.options
: Array of options (default:[]
).optionsVarName
: Variable name for dynamic options (default:false
).position
: Dropdown position (default:top
).tags
: Whether to allow tags (default:false
).addItems
: Whether to allow adding items (default:true
).renderChoiceLimit
: Limit for rendering choices (default:-1
).editItems
: Whether to allow editing items (default:false
).removeItems
: Whether to allow removing items (default:true
).removeItemButton
: Whether to show a remove button (default:true
).duplicateItemsAllowed
: Whether duplicate items are allowed (default:false
).delimiter
: Delimiter for separating items (default:null
).paste
: Whether to allow pasting items (default:false
).resourceName
: Resource name for dynamic options (default:false
).placeholderValue
: Placeholder text (default:false
).allowHTML
: Whether to allow HTML in options (default:true
).searchResultLimit
: Limit for search results (default:4
).maxItemCount
: Maximum number of items (default:-1
).shouldSort
: Whether to sort items (default:false
).tagColor
: Color for tags (default:#3B82F6
).loadFromCdn
: Whether to load Choices.js from CDN (default:true
).
- Example:
<x-bbs-input.choices name="example" :tags="true" :addItems="true" />
bbs-input.datetime
- Description: A customizable datetime picker.
- Props:
enableTime
: Whether to enable time selection (default:false
).enableSeconds
: Whether to enable seconds selection (default:false
).monthSelectorStatic
: Whether the month selector is static (default:false
).position
: The position of the picker (default:bottom left
).mode
: The mode of the picker (default:single
).hourIncrement
: Hour increment step (default:1
).minuteIncrement
: Minute increment step (default:5
).noCalendar
: Whether to hide the calendar (default:false
).dateFormat
: The format of the date (default:d.m.Y H:i
).allowInput
: Whether to allow manual input (default:false
).defaultHour
: Default hour value (default:12
).hours24
: Whether to use 24-hour format (default:true
).weekNumbers
: Whether to show week numbers (default:false
).minDate
: Minimum selectable date (default:false
).maxDate
: Maximum selectable date (default:false
).disable
: Whether to disable the picker (default:false
).color
: The color for the picker (default:#3B82F6
).loadFromCdn
: Whether to load Flatpickr from CDN (default:true
).wrapperClasses
: CSS classes for the wrapper (default:false
).iconBoxClasses
: CSS classes for the icon box (default:false
).inputClasses
: CSS classes for the input (default:false
).placeholder
: Placeholder text (default:false
).additionalOptions
: Additional options for Flatpickr (default:[]
).disableMobile
: Whether to disable mobile mode (default:true
).theme
: Theme for the picker (default:false
).
- Example:
<x-bbs-input.datetime :enableTime="true" dateFormat="Y-m-d" />
bbs-input.image
- Description: A customizable image input field.
- Props:
id
: The ID of the input (default:image
).model
: The model binding for the input.image
: The image source.
- Example:
<x-bbs-input.image id="profile-image" model="user.image" image="/path/to/image.jpg" />
bbs-input.image-upload.filepond
- Description: A file upload input using FilePond.
- Props:
minFileSize
: Minimum file size (default:null
).maxFileSize
: Maximum file size (default:null
).maxTotalFileSize
: Maximum total file size (default:null
).existingFilesVar
: Variable for existing files (default:existing_files
).removeMethod
: The method to remove files (default:removeFile
).
- Example:
<x-bbs-input.image-upload.filepond :minFileSize="1024" :maxFileSize="1048576" />
bbs-typewriter
- Description: A typewriter effect component.
- Props:
strings
: Array of strings to type (default:[]
).typeSpeed
: Typing speed in milliseconds (default:60
).showCursor
: Whether to show the cursor (default:true
).loop
: Whether to loop the typing effect (default:false
).backDelay
: Delay before typing the next string (default:1000
).cursorChar
: The character used as the cursor (default:|
).
- Example:
<x-bbs-typewriter :strings="['Hello', 'World']" :typeSpeed="100" :loop="true" />
bbs-scroll-top
- Description: A scroll-to-top button.
- Props:
title
: The title of the button (default:Ganz nach oben
).visibleFromScrollTo
: The scroll position to show the button (default:20
).additionalClasses
: Additional CSS classes for the button (default:hover:bg-blue-500
).
- Example:
<x-bbs-scroll-top title="Scroll Up" :visibleFromScrollTo="100" additionalClasses="bg-red-500" />
bbs-image-crop
- Description: An image cropping component.
- Props:
src
: The source of the image.viewMode
: The view mode for the cropper (default:3
).dragMode
: The drag mode for the cropper (default:move
).aspectRatio
: The aspect ratio for cropping (default:16 / 9
).autoCropArea
: The auto crop area (default:1
).zoomable
: Whether the image is zoomable (default:false
).
- Example:
<x-bbs-image-crop src="/path/to/image.jpg" :aspectRatio="4 / 3" :zoomable="true" />
bbs-action-button.stack
- Description: A stack of action buttons.
- Props:
showIf
: Whether to show the stack (default:false
).profileButtonText
: Text for the profile button (default:Profil
).logoutButtonText
: Text for the logout button (default:Abmelden
).bgClasses
: Background CSS classes for the buttons (default:bg-blue-500
).profileButton
: Custom profile button content (default:null
).hideProfileButton
: Whether to hide the profile button (default:false
).
- Example:
<x-bbs-action-button.stack :showIf="true" profileButtonText="My Profile" bgClasses="bg-green-500" />
bbs-tag-cloud
Description: A flexible, animated 3D tag cloud component using TagCanvas.js.
Props:
tags
: The list of tags to display. Each tag must have alabel
.width
: Width of the canvas.height
: Height of the canvas.depth
: Depth effect for the 3D sphere.freezeActive
: Whether the animation freezes on hover.clickToFront
: Whether clicked tags rotate to the front.textColor
: Color of the tag texts.outlineColour
: Color of the tag outlines.outlineThickness
: Thickness of the tag outlines.initialSpeed
: Initial rotation speed.minSpeed
: Minimum rotation speed.maxSpeed
: Maximum rotation speed.shape
: Shape of the tag cloud (sphere
,vcylinder
,hcylinder
).withLinks
: Whether tags are clickable links or just text.linkRoute
: The route name for tag links (ifwithLinks
is true).linkParamField
: The field on the tag object to pass to the route.anchorAttr
: Additional attributes for the a tag.
Example:
<x-bbs-tag-cloud :tags="$tags" textColor="#3399cc" :clickToFront="false" :withLinks="true" linkRoute="route.name" linkParamField="item_id" class="absolute inset-0" />
Commands
make:listing
- Description: Generates a new listing component.
- Usage:
php artisan make:listing {name} {component-name?} {slide-over-name?} {--permission=} {--force} {--inline} {--test} {--stub=} {--namespace=listings} {--prefix=}
- Options:
name
: The name of the listing.component-name
: The Blade component name for the listing.slide-over-name
: The corresponding slide-over name.--permission
: Permissions for the listing.--namespace
: Namespace for the component (default:listings
).
make:slide-over
- Description: Creates a new slide-over component.
- Usage:
php artisan make:slide-over {name} {--button-text=} {--hide-on-click-away} {--title=} {--force} {--inline} {--test} {--stub=} {--namespace=slide-overs} {--prefix=}
- Options:
name
: The name of the slide-over.--button-text
: Text for the button to open the slide-over.--hide-on-click-away
: Whether to close the slide-over when clicking outside.--title
: Title of the slide-over.
Customization
You can customize the stubs used for generating components by modifying the files in the stubs/
directory. The InteractsWithLivewireStubs
trait handles the replacement of placeholders in these stubs.
License
This package is open-sourced software licensed under the MIT license.