Modal Fullscreen ​

<KButton appearance="primary" @click="defaultIsOpen = true">Open Modal</KButton>

<KModalFullscreen
  title="Hello There!"
  :isVisible="defaultIsOpen"
  @canceled="defaultIsOpen = false"
  @proceed="defaultIsOpen = false">
  <p>{{ alotOfText }}</p>
</KModalFullscreen>

<script>
export default {
  data () {
    return {
      defaultIsOpen: false
    }
  }
}
</script>

<KButton appearance="primary" @click="contentIsOpen = true">Open Modal</KButton>

<KModalFullscreen
  title="Hello There!"
  :isVisible="contentIsOpen"
  @canceled="contentIsOpen = false"
  @proceed="contentIsOpen = false"
  cancelButtonText="Abort"
  cancelButtonAppearance="secondary">
  <p>Maecenas rutrum molestie dolor, sit amet volutpat sapien tristique vitae. Nam tortor nulla, malesuada vel lacus ut, consectetur sagittis nisi. Vestibulum convallis rhoncus ipsum, vitae porta nulla pharetra quis. Nam tristique eget metus sit amet blandit. Suspendisse porta nunc ut dapibus finibus. In hac habitasse platea dictumst. Morbi vel lectus vulputate, cursus augue ultrices, vulputate massa. Pellentesque bibendum et augue et placerat. Duis a est et quam blandit ornare. Phasellus quis mi eget magna vehicula pharetra eu et nunc. In hac habitasse platea dictumst. Nam eleifend purus ante, in porta mauris vulputate eget. Nunc in nulla aliquet metus vehicula rhoncus.</p>
  <p>Praesent fringilla sapien vitae faucibus vestibulum. Integer viverra hendrerit purus quis consequat. Phasellus dolor enim, interdum in faucibus ut, congue eu quam. Donec eu metus eget eros accumsan feugiat. Donec a magna posuere, sagittis eros ac, bibendum erat. Donec aliquet velit et nunc mattis tincidunt. Nam eu nibh nec purus pretium fermentum. Proin interdum nunc ac turpis blandit, sed malesuada lectus convallis. Morbi quis aliquet lorem, non ultrices quam. Aliquam et consectetur lorem. Nam ac nisl tellus. Duis id nunc lectus. Etiam semper auctor enim, id hendrerit nisl vulputate nec.</p>
  <p>Nunc ante orci, tempus a fringilla quis, interdum et nisi. Nulla a dui ut leo scelerisque rhoncus. Suspendisse iaculis, orci quis congue sollicitudin, orci ligula tempus nisl, consequat elementum urna elit sit amet orci. Pellentesque in feugiat massa, ac dapibus nunc. Etiam dapibus vehicula elit, a sollicitudin nulla fringilla in. Pellentesque lobortis arcu lectus, sit amet fringilla quam pretium sit amet. Sed mi turpis, bibendum quis tincidunt vel, mattis finibus lorem. Ut imperdiet ultrices libero in dictum. Duis elementum imperdiet erat in feugiat. Nam tempor interdum tellus non auctor. Quisque sed sodales purus. Nunc eu est ac elit aliquet euismod. Fusce pellentesque, lorem sed elementum placerat, dolor felis scelerisque quam, ut placerat elit dolor sit amet dui.</p>
</KModalFullscreen>

<KButton appearance="primary" @click="exampleIsOpen = true">Open Fullscreen Modal</KButton>

<KModalFullscreen
  :isVisible="exampleIsOpen"
  title="Install Plugin"
  @canceled="exampleIsOpen = false">
  <template #header-icon>
    <KIcon icon="immunity" />
  </template>
  <template #header-content>
    Install Plugin
  </template>
  <template #body-header>
    Select a plugin
  </template>
  <template #body-header-description>
    Choose a plugin from our catalog to install for your organization. <a>View documentation</a>
  </template>
  <template #footer-content>
    This is footer
  </template>
  <h3>Security</h3>
  <KCatalog :fetcher="() => getItems(8)" />
  <h3>Authentication</h3>
  <KCatalog :fetcher="() => getItems(16)" />
</KModalFullscreen>

<KButton appearance="primary" @click="sampleIsOpen = true">Open Form Modal</KButton>

<KModalFullscreen
  :isVisible="sampleIsOpen"
  title="Install Plugin"
  @canceled="sampleIsOpen = false"
  @proceed="sampleIsOpen = false"
  cancelButtonAppearance="secondary"
  actionButtonText="Delete"
  actionButtonAppearance="danger">
  <template #header-content>
    Install Plugin
  </template>
   <template #body-header>
    <div class="horizontal-spacing">Configure a key auth plugin</div>
  </template>
  <template #body-header-description>
    <div class="horizontal-spacing">Lorem ipsum factum. <a>View documentation</a></div>
  </template>
  <template #action-buttons>
    <KButton size="medium" @click="sampleIsOpen = false">Back</KButton>
    <KButton appearance="creation" size="medium" @click="sampleIsOpen = false">Save</KButton>
  </template>
  <div class="horizontal-spacing">
    <KInputSwitch v-model="checked" label="This plugin is enabled" class="display-items" />
    <br><br>
    <div class="wrapper display-items">
      <KMultiselect label="Pick Something" :items="items" />
    </div>
    <br><br>
    <div class="wrapper display-items">
      <KSelect label="Name" placeholder="I'm labelled!" appearance="select" :items="items" />
    </div>
    <br><br>
    <div class="wrapper display-items">
      <input type="text" placeholder="Enter list of tags">
      <label for="">Tags</label>
    </div>
    <p class="help display-items">e.g., tag1, tag2, tag3</p>
    <div class="wrapper display-items">
      <input type="text" >
      <label for="">Config anonymous</label>
    </div>
    <br><br>
    <KCheckbox v-model="checkedBox1" class="checked display-items">
      Config key in body
    </KCheckbox>
    <br><br>
    <KCheckbox v-model="checkedBox2" class="checked display-items">
      Config key in header
    </KCheckbox>
    <br><br>
    <KCheckbox v-model="checkedBox3" class="checked display-items">
      Config key in query
    </KCheckbox>
    <br><br>
    <KCheckbox v-model="checkedBox4" class="checked display-items">
      Config hide credentials
    </KCheckbox>
    <br><br>
    <div class="wrapper display-items">
      <input type="text" placeholder="0" />
      <label for="">Health checks active healthy interval</label>
    </div>
    <br><br>
    <KCheckbox v-model="checkedBox5" class="checked display-items">
      Config run on preflight
    </KCheckbox>
  </div>
</KModalFullscreen>

<KButton appearance="primary" @click="themeIsOpen = true">Open Modal</KButton>

<div class="modal-wrapper">
  <KModalFullscreen
    title="Hello There!"
    :isVisible="themeIsOpen"
    @canceled="themeIsOpen = false"
    @proceed="themeIsOpen = false" >
    <p>{{ soMuchText1 }}</p>
    <p>{{ soMuchText2 }}</p>
    <p>{{ soMuchText3 }}</p>
    <p>{{ soMuchText4 }}</p>
    <p>{{ soMuchText5 }}</p>
  </KModalFullscreen>
</div>

<style>
.modal-wrapper {
  --KModalFullscreenHeaderColor: red;
  --KModalFullscreenColor: green;
}
</style>