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