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

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

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

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