Slots

Slots are helpful at individualizing a component or creating reusable code

Slots are a mechanism for Vue components that allows you to compose your components and to inject content into a child component, by passing template code.

Signature of Slots

<!-- FORM #slot-[top|bottom]-[formbase-id || 'form-base']-->
  <template #slot-top-my-form="{id, index, obj}"></template>

  <!-- KEY #slot-[top|bottom|item]-key-[formbase ID]-[path key] -->
  <template #slot-top-key-my-form-name="{id, index, obj}"></template>
  <template #slot-bottom-key-my-form-controls-check></template>

  <!-- TYPE #slot-[top|bottom|item]-type-[formbase ID]-[type of control]-->
  <template #slot-top-type-my-form-checkbox="{id, index, obj}"></template>

  <!-- 
    INJECT specific slot into exposed slot of vuetify control  
    #slot-inject-[slot to inject into control]-key-[formbase ID]-[path key]
  -->
  <template #slot-inject-label-key-my-form-name="{id, index, obj}">
  
  <!-- TOOLTIP #slot-tooltip to activate you must have schema prop tooltip -->
  <template #slot-tooltip="{id, index, obj}">

Schema which is used in the following examples

mySchema: {
  name: { type: 'text' },
  fileinput: { type: 'file' }
  controls: {
    check: { type:'checkbox'}
  }
}

Form-Base Slots

Signature

<template #slot-['top'|'bottom']-[formbase ID || 'form-base'] >
...
</template>

Example

<v-form-base
  id="my-form"
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>
  <!-- TOP at FORM -->
  <template #slot-top-my-form>
    <h4 >Top Slot of 'Form'</h4>
  </template>
  <!-- BOTTOM at FORM -->
  <template #slot-bottom-my-form>
    <h4>Bottom Slot of 'Form'</h4>  
  </template>

</v-form-base>

Key Slots

Signature

<template 
  #slot-['top'|'bottom'|'item']-key-[formbase ID]-[path-key]={obj,id,index}  
>
...
</template>

Example

<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>  
  <!-- TOP of KEY -->
  <template #slot-top-key-form-base-name="{obj}">
    <h4>Slot at Top of Key '{{obj.key}}'</h4>
  </template>
  <!-- ITEM of KEY -->
  <template #slot-item-key-form-base-name="{id, index, obj}">
    <h4>
      <div>Formbase ID: {{id}}</div>
      <div>Index of Component: {{index}}</div>
      <div>Current Object:{{obj}}</div>
    </h4>
  </template>
  <!-- BOTTOM of KEY -->
  <template #slot-bottom-key-form-base-controls-check="{obj}">
    <h4>Slot at Bottom with Key '{{obj.key}}'</h4>
  </template>      
  
</v-form-base>

Type Slots

Signature

<template 
  #slot-['top'|'bottom'|'item']-type-[formbase ID]-[type of control]={obj,id,index} 
>
...
</template>

Example

<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>

<!-- TYPE SLOTS -->
  <template #slot-bottom-type-form-base-checkbox="{obj}">
    <h4>Slot at Bottom of Type 'Checkbox' - {{obj.value}</h4>
  </template>

</v-form-base>

Array Slots

Signature

<template 
  #slot-['top'|'bottom'|'item']-array-[formbase ID]-[key of Array]={obj,id,index,idx,item} 
>
...
</template>

See this live in Array-Slot-Example

mySchema: {
  tasks: {
    type: 'array',
    schema: {
      task: { type: 'text' },
      done: { type: 'checkbox'}
    }
  }
}

<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>

  <template #slot-top-array-form-base-tasks="{obj, idx, item}">
    <div>{{idx}} - Slot at Top of each Item in Array '{{obj.key}}'</div>
  </template>
  <template #slot-bottom-array-form-base-tasks="{obj}">
    <div>{{idx}} -Slot at Bottom of each Item in Array '{{obj.key}}'</div>
  </template>
        
</v-form-base>

Inject Slot into Vuetify Control

Signature

<!-- vslot = slot in vuetify-control -->
<template 
  #slot-inject-[vslot]-key-[formbase ID]-[path-key]={obj,id,index,...vslot} 
>
...
</template>

Simple Example

<v-form-base id="my-form" :model="myModel" :schema="mySchema" @input="inputHandler" >

  <!-- 
    inject this slot via key fileinput at form-base 
    into 'selection'-slot of v-file-input
  -->
  <template #slot-inject-selection-key-form-base-fileinput="{text}">
    <v-chip small label color="blue">
      {{ text }}
    </v-chip>
  </template>
   
</v-form-base>    

See this live in Slot-Example

<v-form-base
  :model="myModel"
  :schema="mySchema"
  @input="inputHandler"
>
        
<!-- INJECT SLOTS INTO KEY  -->  
  <!-- INJECT progress into key -->
  <template #slot-inject-progress-key-form-base-nameSlot="">
    <v-progress-linear
      :value="progress"
      :color="color"
      absolute
      height="9"
    />
  </template>
  <!-- INJECT selection into file input -->
  <template #slot-inject-selection-key-form-base-fileSlot="{text}">
    <v-chip small label color="blue">
      {{ text }}
    </v-chip>
  </template>
  <!-- INJECT append -->
  <template #slot-inject-append-key-form-base-colorSlot="{obj}" >
    <h4 class="slot"><v-icon :color="obj.value">palette</v-icon>Key-Slot</h4>
  </template>
  <!-- INJECT label -->
  <template #slot-inject-label-key-form-base-controls-switch="{obj}">
    <span class="slot-label">Label <b>Slot of Key</b> '{{obj.key}}'</span>
  </template>
  <!-- INJECT label -->
  <template #slot-inject-label-key-form-base-controls-radio="{option}">
     <v-chip small label color="blue">
       Slot-{{option}}
     </v-chip>
  </template>

  <!-- inject slots into key controls-slider -->
  <template #slot-inject-label-key-form-base-controls-slider>
    <strong class="blue--text">Slot</strong>
  </template>         
  <template #slot-inject-prepend-key-form-base-controls-slider>
    <v-icon color="blue">menu</v-icon>
  </template> 

</v-form-base>

Tooltip Slots

see in Section Tooltips

Slot-Example

Array-Slot-Example