README

World UI是一个组件库，基于WireUI，便于与Weblabor World API集成。

安装

使用composer安装此包

composer require weblabormx/world-ui

然后，在您的 config/services.php 中配置您的World API Token。

[
    //...
    'weblabor' => [
        'world' => [
            'token' => env('WEBLABOR_WORLD_TOKEN'),
            // 'endpoint' => env('WEBLABOR_WORLD_ENDPOINT') // OPTIONAL
        ]
    ]
];

发布资源

您可以选择使用以下方式发布 wireui.php 配置文件

php artisan vendor:publish --tag='worldui.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'
        ],
    ]
];

组件

国家选择

检查所有字段

示例

<x-country-select
    wire:model="country"
    wire:key="country-select"
    label="Country"
    placeholder="Your country" />

分区选择

唯一字段

• id: 获取子项的分区ID
• regex: 可选的正则表达式，用于匹配国家名称

检查所有字段

示例

<x-division-select
    label="State"
    id="{{ $country }}"
    wire:key="state-select"
    placeholder="Your state" />

搜索选择

唯一字段

• search: 要搜索的内容
• parentId: 过滤结果的分区ID

检查所有字段

示例

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