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>

btn-groups

<v-btn-groups>
<template slot-scope="{right, middle, left}">
<v-btn theme="white" :btn-class="right">Add Variant</v-btn>
<v-btn v-click-outside="() => isVariantsActionShow = false" @click="isVariantsActionShow = !isVariantsActionShow" theme="white" :btn-class="left">
<v-hero-icon class="h-5 w-5" name="chevron-down"></v-hero-icon>
</v-btn>
<v-dropdown :is-show="isVariantsActionShow" class="right-0 mt-11 z-10">
<v-dropdown-button>Edit Options</v-dropdown-button>
<v-dropdown-button>Reorder Variants</v-dropdown-button>
</v-dropdown>
</template>
</v-btn-groups>

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>

table

<v-table :items="model.variants">
<template slot="head" slot-scope="{motherCheckboxAttrs, motherCheckboxEvents}">
<v-table-column>
<v-table-column-checkbox v-bind="motherCheckboxAttrs" v-on="motherCheckboxEvents">
<v-dropdown-button>Select admin</v-dropdown-button>
</v-table-column-checkbox>
</v-table-column>
<v-table-column>SKU&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</v-table-column>
<v-table-column></v-table-column>
</template>
<template slot="body" slot-scope="{ checkboxes, items }">
<v-table-row :key="variant.id" v-for="(variant,index) in items">
<v-table-cell>
<v-checkbox v-model="checkboxes[index]"></v-checkbox>
</v-table-cell>
<v-table-cell v-for="option in model.options" :key="option.id">
<v-vfg :model="variant.variations.find((v) => v.product_option_id == option.id)">
{
type: "input",
inputType: "text",
model: "value",
placeholder: ""
}
</v-vfg>
</v-table-cell>
<v-table-cell-action>
<v-dropdown-button component="inertia-link" :href="route('cms.shop.products.editVariant', [model.id, variant.id])">Edit</v-dropdown-button>
</v-table-cell-action>
</v-table-row>
</template>
</v-table>

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>