Components

Convention

If the component has (ref: feature), it means that you can refer the component by ref and access the feature available.

visibility feature: show(), hide()

btn

<btn size="md" theme="secondary" color="red">
sadasd
</btn>

search-bar

<search-bar :endpoint="searchEndpoint" v-model="q"></search-bar>

wide-list

https://tailwindui.com/components/application-ui/lists/wide

<wide-list>
<wide-list-item>
You Content
</wide-list-item>
</wide-list>

sidebar (ref: visibility)

edge case: - if you re-use existing dark text vertical-nav inside sidebar, and sidebar theme is dark color, consider adding "sidebar-white-text" class

<sidebar ref="sidebar"></sidebar>
$refs.sidebar.show()
$refs.sidebar.hide()

notification (ref: visibility)

<notification ref="noti"></notification>
setup(title, subtitle, icon, iconClasses)
show()
hide()

media-upload

<media-upload
:id="fieldId"
:show="schema.multiple || ((! schema.multiple) && media && media.length == 0)"
:has-error="errors.length > 0"
:accept="schema.accept"
:placeholder="schema.placeholder"
:multiple="schema.multiple"
@change="fileChanged"
@dropped="dropped"></media-upload>

tab-nav

<tab-nav class="mb-4" :col="2">
<tab-nav-button is-active title="All Blogs" url="{{ route('admin.blogs.index') }}"></tab-nav-button>
<tab-nav-button title="Categories"></tab-nav-button>
</tab-nav>

breadcrumbs

<card class="mb-5">
<template v-slot:title>
<breadcrumbs>
<breadcrumb label="All Media" url="{{ route('account.media.index') }}"></breadcrumb>
<breadcrumb label="Upload Media"></breadcrumb>
</breadcrumbs>
</template>
</card>

alpine

<alpine inline-template
:populate-data="{ open: false }"
:populate-methods="{ add: function () {} }">
<button @click="data.open = !data.open">Click Me</button>
<div v-if="data.open">
Hello world
</div>
</alpine>

heading

<heading title="hello" subtitle="world"></heading>

mini-heading

<mini-heading icon="ballot" title="General" subtitle="View and update your application"></mini-heading>

link-list

<link-list class="mt-3">
<link-list-item label="Privacy Policy" url="asdasda"></link-list-item>
<link-list-item label="Terms and Conditions" url="asdasda"></link-list-item>
</link-list>

location-setter

<location-setter
placeholder=""
:show-map="true"
:enable-fields="true"
:lat="3.21312"
:lng="3.21312"
:boot="true"
input-class=""
@change=""
></location-setter>

modal / slide-over (ref: visibility)

<button @click="$refs.modal.show()">Open Modal</button>
<modal
max-width="lg"
ref="modal"
has-cancel
ok-label="Okay"
title="this is title"
subtitle="this is subtitle"
@ok=""
>
<template v-slot:header></template>
Hello world
</modal>

progress-bar

<progress-bar :percent="20%"></progress-bar>

tabs

<tabs :initial-index="0">
<template v-slot="middle">
@errors
@alerts
</template>
<tab title="Hello">
<template v-slot:icon>
some icon here
</template>
tab content
</tab>
<tab-blank>
No card content
</tab-blank>
</tabs>

vfg

<vfg :options="formOptions" :model="model">
{
type: "divider"
}
</vfg>

alert

<alert>
Warning!!
</alert>

tableable

<tableable-actions ref="tableableactions"
:sort="[{name: 'created_at', asc: '(newest)', desc: '(oldest)', label: 'Created At'}]">
<template v-slot:bulk="props">
<dropdown-button>Select admin</dropdown-button>
</template>
<template v-slot:filter>
<vfg>
{
type: "input",
inputType: "text",
inputName: "filter[role]",
model: "",
required: true,
placeholder: ""
},
</vfg>
</template>
</tableable-actions>
<div class="flex flex-col">
<tableable ref="table" actions-ref="tableableactions" :items='@json($_data)'
class="tw-table is-tableable is-actionable is-bulkable">
<table>
<thead>
<tr>
<th>
</th>
<th>
Title
</th>
<th>
Status
</th>
<th>
Publish At
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($_data as $data)
<tr>
<td>
<tableable-checkbox></tableable-checkbox>
</td>
<td>
{{ Str::words($data->title, 4, '...') }}
</td>
<td>
{{ $data->status }}
</td>
<td>
{{ $data->publish_at }}
</td>
<td>
<a href="@route('admin.blogs.edit', $data)" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</tableable>
</div>

card

<card title="" subtitle="" action-label="" action-url="">
<template v-slot:title></template>
<template v-slot:middle></template>
Default slot with no class
<template v-slot:content></template>
<template v-slot:after-content></template>
</card>

divider

<divider></divider>

dropdown

<dropdown>
<dropdown-button>Select admin</dropdown-button>
</dropdown>

enable-warn

enable exit page prompt

sort-button

must wrap with form tag

<sort-action @change="$refs.form.submit()">
<sort-action-button name="" label="" asc="" desc=""></sort-action-button>
</sort-action>

filter-button

must wrap with form tag

<filter-button @change="$refs.form.submit()">
modal content
</filter-button>

icon-pack

if is-heroicon, auto outline heroicon

support for material icon

<icon-pack name="" is-heroicon></icon-pack>

heroicon | md-icon

<heroicon name="" solid|outline></heroicon>
<md-icon name=""></md-icon>

pagination

<pagination :paginator='@json($_data)'></pagination>

prepare-form

generaete token and method field from window._data

<prepare-form :model-data="optional if you have @essentials"></prepare-form>

vertical-nav

<vertical-nav href="{{ route('admin.users.index') }}" {{ add_class_by_controller('App\Http\Controllers\Admin\UserController', 'is-active') }} icon="people">
Users
</vertical-nav>