weblabormx/world-ui

There is no license information available for the latest version (1.0.8) of this package.

UI Component library built on top of WireUI that implement Weblabor World service out of the box

1.0.8 2024-01-02 21:24 UTC

Requires

• php: ^8.1
• illuminate/support: *
• weblabormx/world: ^1.0.5
• wireui/wireui: ^1.17

Unknown License

• Carlos Escobar
• Luan Himmlisch

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

Check all fields

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

Check all fields

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

Check all fields

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 />