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 size="md" theme="secondary" color="red">sadasd</btn>
<search-bar :endpoint="searchEndpoint" v-model="q"></search-bar>
​https://tailwindui.com/components/application-ui/lists/wide​
<wide-list><wide-list-item>You Content</wide-list-item></wide-list>
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="noti"></notification>​setup(title, subtitle, icon, iconClasses)show()hide()
<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 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>
<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 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 title="hello" subtitle="world"></heading>
<mini-heading icon="ballot" title="General" subtitle="View and update your application"></mini-heading>
<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-setterplaceholder="":show-map="true":enable-fields="true":lat="3.21312":lng="3.21312":boot="true"input-class=""@change=""></location-setter>
<button @click="$refs.modal.show()">Open Modal</button><modalmax-width="lg"ref="modal"has-cancelok-label="Okay"title="this is title"subtitle="this is subtitle"@ok=""><template v-slot:header></template>Hello world</modal>
<progress-bar :percent="20%"></progress-bar>
<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 :options="formOptions" :model="model">{type: "divider"}</vfg>
<alert>Warning!!</alert>
​<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 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>
<dropdown><dropdown-button>Select admin</dropdown-button></dropdown>
enable exit page prompt
must wrap with form tag
<sort-action @change="$refs.form.submit()"><sort-action-button name="" label="" asc="" desc=""></sort-action-button></sort-action>
must wrap with form tag
<filter-button @change="$refs.form.submit()">modal content</filter-button>
if is-heroicon, auto outline heroicon
support for material icon
<icon-pack name="" is-heroicon></icon-pack>
<heroicon name="" solid|outline></heroicon>​<md-icon name=""></md-icon>
<pagination :paginator='@json($_data)'></pagination>
generaete token and method field from window._data
<prepare-form :model-data="optional if you have @essentials"></prepare-form>
<vertical-nav href="{{ route('admin.users.index') }}" {{ add_class_by_controller('App\Http\Controllers\Admin\UserController', 'is-active') }} icon="people">Users</vertical-nav>