weblabormx / world-ui
UI Component library built on top of WireUI that implement Weblabor World service out of the box
Installs: 108
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
pkg:composer/weblabormx/world-ui
Requires
- php: ^8.1
- illuminate/support: *
- weblabormx/world: ^1.0.5
- wireui/wireui: ^2.4.3
README
World UI is a component library, based on WireUI for easy implementation with Weblabor World API.
Install
Install the package through composer using:
composer require weblabormx/world-ui
Then, configure on your config/services.php your World API Token.
[
//...
'weblabor' => [
'world' => [
'token' => env('WEBLABOR_WORLD_TOKEN'),
// 'endpoint' => env('WEBLABOR_WORLD_ENDPOINT') // OPTIONAL
]
]
];
Publishing assets
You can optionally publish the wireui.php config file using:
php artisan vendor:publish --tag='worldui.config'
Default config:
<?php use WeblaborMx\WorldUi\Components; return [ 'endpoint' => rtrim(config('services.weblabor.world.endpoint', env('WEBLABOR_WORLD_ENDPOINT', 'https://world.weblabor.mx/api')), '/'), 'api_token' => config('services.weblabor.world.token', env('WEBLABOR_WORLD_TOKEN')), 'components' => [ [ 'class' => Components\CountrySelect::class, 'alias' => 'country-select' ], [ 'class' => Components\DivisionSelect::class, 'alias' => 'division-select' ], [ 'class' => Components\DivisionSearchSelect::class, 'alias' => 'division-search' ], ] ];
Components
Country Select
Example:
<x-country-select
wire:model="country"
wire:key="country-select"
label="Country"
placeholder="Your country" />
Division Select
Unique Fields
- id: The ID of the division to get the children from
- regex: An optional regex to match the names of the countries
Example:
<x-division-select
label="State"
id="{{ $country }}"
wire:key="state-select"
placeholder="Your state" />
Search Select
Unique Fields
- search: Content to be searched
- parentId: Division ID to filter the results
Example:
<x-input label="Search"
wire:model.lazy="search"
placeholder="Your search" />
<x-division-search
search="{{ $search }}"
parentId="{{ $country }}"
wire:key="search-select"
wire:target="search"
wire:loading.remove />