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

<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 :endpoint="searchEndpoint" v-model="q"></search-bar>

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

<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-setter 
    placeholder=""
    :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>
 
<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 :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>

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

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

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

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

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

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

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