agenciafmd/admix-ui

Admix UI - Inspired on Mary-UI - Agência F&MD

dev-master 2025-01-22 17:23 UTC

Requires

• agenciafmd/admix-icons: v11.x-dev
• laravel/framework: ^11.0
• livewire/livewire: ^3.4
• rappasoft/laravel-livewire-tables: ^3.2
• spatie/laravel-medialibrary: ^11.0

Requires (Dev)

• laravel/pint: ^1.0

MIT

• Irineu Martins Junior

README

Acesso rápido

• Instalação
• Formulário
  • Input
  • Number
  • Email
  • Password
  • KeyValue
  • Datetime / Date / Time
  • Select
  • Textarea
  • Easymde
  • Plain Text
  • Toggle / Multi Toggle
  • Radio
  • Checkbox
• Página
  • Form
• UI
  • Card
  • Card sem header
• Contribuindo
• Licença

Instalação

composer install agenciafmd/admix-ui:v11.x-dev

Formulário

<x-form>
    <div class="mb-3">
        <x-form.input name="form.name" label="Nome" required/>
    </div>
    <div class="mb-3">
        <x-form.textarea name="form.message" label="Mensagem" maxlength=100 required/>
    </div>
    <div class="mb-3">
        @php
        $options = [
        [
        'value' => '',
        'label' => '-'
        ],
        [
        'value' => 1,
        'label' => 'Item01'
        ],
        [
        'value' => 2,
        'label' => 'Item02'
        ],
        [
        'value' => 3,
        'label' => 'Item03 (desabilitada)',
        'disabled' => true
        ]
        ];
        @endphp
        <x-form.select name="form.select" label="Select" :options="$options" required/>
    </div>
</x-form>

Input

<div class="mb-3">
    <x-form.input name="form.name" label="Nome" required/>
</div>
<div class="mb-3">
    <x-form.input name="form.name" label="Nome" hint="Preencha com seu nome completo"/>
</div>

Number

<div class="mb-3">
    <x-form.number name="form.number" label="Quantidade" hint="de 0 a 100"/>
</div>

Email

<div class="mb-3">
    <x-form.email name="form.email" label="E-mail"/>
</div>

Password

<div class="mb-3">
    <x-form.password name="form.password" label="Senha"/>
</div>
<div class="mb-3">
    <x-form.password name="form.password" label="Senha"
                     hint="Utilize pelo menos 1 letra maiúscula e caracteres especiais"/>
</div>

KeyValue

<div class="mb-3">
    <x-form.key-value name="form.options"
                      label="Opções"
                      key-placeholder="Ex. Carburador"
                      value-placeholder="Ex. 32-PDSI-2/3"
    />
</div>

Datetime / Date / Time

<div class="mb-3">
    <x-form.datetime name="form.published_at" label="Data e hora de publicação"/>
</div>
<div class="mb-3">
    <x-form.date name="form.published_at" label="Data de publicação"/>
</div>
<div class="mb-3">
    <x-form.time name="form.published_at" label="Hora de publicação"/>
</div>

Select

<div class="mb-3">
    @php
    $options = [
    [
    'value' => '',
    'label' => '-'
    ],
    [
    'value' => 1,
    'label' => 'São Paulo'
    ],
    [
    'value' => 2,
    'label' => 'Rio de Janeiro',
    'disabled' => true
    ]
    ];
    @endphp
    <x-form.select label="Estados" name="form.state" :options="$options"/>
</div>

Textarea

<div class="mb-3">
    <x-form.textarea name="form.message" label="Mensagem" maxlength=100 required/>
</div>

Easymde

<div class="mb-3">
    <x-form.easymde name="form.description" label="Descrição"/>
</div>

Plain Text

<div class="mb-3">
    <x-form.plaintext label="Status"
                      value="Em processamento"/>
</div>
<div class="mb-3">
    <x-form.plaintext label="Data de criação"
                      value="18/11/2024 09:11:03"/>
</div>

Toggle

<div class="mb-3">
    <x-form.label for="form.is_available">
        Disponível
    </x-form.label>
    <x-form.toggle
            name="form.is_available"
            :large="true"
            :label-on="__('Yes')"
            :label-off="__('No')"
    />
</div>

Multi Toggle

<div class="mb-3">
    <x-form.label for="form.payment_methods">
        Modalidades de Pagamento
    </x-form.label>
    @php
    $paymentMethods = [
    [
    'label' => 'Cartão de Crédito',
    'value' => 'credit_card',
    ],
    [
    'label' => 'Boleto Bancário',
    'value' => 'boleto',
    ],
    [
    'label' => 'PIX',
    'value' => 'pix',
    ],
    [
    'label' => 'Transferência Bancária',
    'value' => 'bank_transfer',
    ],
    ];
    @endphp
    @foreach($paymentMethods as $method)
    <x-form.toggle name="form.payment_methods"
                   :label="$method['label']"
                   :value="$method['value']"/>
    @endforeach
</div>

Radio

<div class="mb-3">
    <x-form.group label="Escolha o tipo de Imóvel:">
        <x-form.radio name="form.propertyType" label="Apartamento" value="apartamento"/>
        <x-form.radio name="form.propertyType" label="Casa" value="casa"/>
        <x-form.radio name="form.propertyType" label="Imóvel Comercial" value="imovel-comercial"
                      hint="Selecione uma opção"/>
    </x-form.group>
</div>

Radio Inline

<div class="mb-3">
    <x-form.group label="Escolha o tipo de Imóvel:">
        <x-form.radio name="form.propertyType" label="Apartamento" value="apartamento" inline/>
        <x-form.radio name="form.propertyType" label="Casa" value="casa" inline/>
        <x-form.radio name="form.propertyType" label="Imóvel Comercial" value="imovel-comercial"
                      hint="Selecione uma opção"
                      inline
                      disabled/>
    </x-form.group>
</div>

Checkbox

<x-form.checkbox name="form.terms" label="Concordo com os Termos de Uso"/>

Multi Checkbox

<div class="row">
    <div class="col-md-12 mb-3">
        <x-form.label for="role.differentials">
            Diferenciais
        </x-form.label>
        <div class="row col-md-12">
            @php
            $checkbox = [
            [
            'label' => 'Playground',
            'value' => 'playground',
            ],
            [
            'label' => 'Área Gourmet',
            'value' => 'gourmet_area',
            ],
            [
            'label' => 'Espaço Pet',
            'value' => 'pet_area',
            ],
            [
            'label' => 'Academia',
            'value' => 'gym',
            ],
            [
            'label' => 'Portaria 24h',
            'value' => 'concierge_24h',
            ],
            [
            'label' => 'Alarme Monitorado',
            'value' => 'monitored_alarm',
            ],
            [
            'label' => 'Quadra Poliesportiva',
            'value' => 'sports_court',
            ],
            ];
            @endphp
            <div class="col-md-3">
                @foreach($checkbox as $item)
                <x-form.checkbox name="form.differentials"
                                 :label="$item['label']"
                                 :value="$item['value']"
                />
                @endforeach
            </div>
        </div>
    </div>
</div>

Página

Form

UI

Card

Card sem header

Contribuindo com o projeto

Para rodar o projeto localmente e contribuir com o desenvolvimento:

Inicie um projeto Laravel

composer create-project laravel/laravel:v11.x-dev ui

Clone o repositório no projeto (não esqueça de entrar nele com cd ui), dentro da pasta packages/agenciafmd/admix-ui

git clone [e-mail]:agenciafmd/admix-ui.git packages/agenciafmd/admix-ui

Adicione o pacote no composer.json do projeto

{
    ...
    "license": "MIT",
    <!--adicione-este-nó-->
    "repositories": {
        "agenciafmd/admix-ui": {
            "type": "path",
            "url": "packages/agenciafmd/admix-ui",
            "options": {
                "symlink": true
            }
        }
    },
    "require": {
        ...
        <!--adicione-o-pacote-->
        "agenciafmd/admix-ui": "*"
    },
    ...
}

Agora, fazemos um update no composer para que ele reconheça o pacote

composer update

Se tudo correu bem, a ide vai reconhecer o pacote e você já pode começar a contribuir.

Licença

Este projeto é entregue sob a Licença MIT.