Dialog

Dialog is a general-purpose modal container — header, body, and footer are all yours via slots.

For simple confirm / alert flows with built-in Accept and Cancel buttons, use Prompt instead. Prompt is not redundant: it targets “Are you sure?”-style interactions; Dialog targets arbitrary UI (forms, wizards, nested modals, fullscreen views).

Default

It generates a Dialog with the s-dialog component, this component is very customizable since it provides a slot to put and make any type of interface to the user’s need

Code copied

<template>
  <div class="center">
    <s-button @click="active = !active"> Open Dialog </s-button>
    <s-dialog v-model="active">
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="email" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="password" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="remember">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">
            New Here? <router-link to="/">Create New Account</router-link>
          </div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const email = ref('')
const password = ref('')
const remember = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Type

You can easily create the most common types of dialogs such as Alert, Confirm or Prompt using the different slots for the structure of the header,default, footer dialog

Code copied

<template>
  <div class="center">
    <s-button @click="active = !active"> Alert </s-button>
    <s-button type="flat" @click="active2 = !active2"> Confirm </s-button>
    <s-button type="border" @click="active3 = !active3"> Prompt </s-button>
    <s-dialog v-model="active" width="550px" not-center>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-content">
        <p>
          Sax Design is a relatively new framework with a refreshing design and in
          the latest trends, Sax Design based on vuejs which means that we go hand
          in hand with one of the most popular javascript frameworks in the
          world and with a huge community with which you will have all the help
          and documentation to create and make your project
        </p>
      </div>

      <template #footer>
        <div class="con-footer">
          <s-button type="transparent" @click="active = false"> Ok </s-button>
        </div>
      </template>
    </s-dialog>
    <s-dialog v-model="active2" width="550px" not-center>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-content">
        <p>
          Sax Design is a relatively new framework with a refreshing design and in
          the latest trends, Sax Design based on vuejs which means that we go hand
          in hand with one of the most popular javascript frameworks in the
          world and with a huge community with which you will have all the help
          and documentation to create and make your project
        </p>
      </div>

      <template #footer>
        <div class="con-footer">
          <s-button type="transparent" @click="active2 = false"> Ok </s-button>
          <s-button color="danger" type="transparent" @click="active2 = false">
            Cancel
          </s-button>
        </div>
      </template>
    </s-dialog>
    <s-dialog v-model="active3" width="300px" not-center>
      <template #header>
        <h4 class="not-margin">Welcome what is your <b>Name</b></h4>
      </template>

      <div class="con-content">
        <s-input v-model="input1" placeholder="Name" />
      </div>

      <template #footer>
        <div class="con-footer">
          <s-button type="transparent" @click="active3 = false"> Ok </s-button>
          <s-button color="danger" type="transparent" @click="active3 = false">
            Cancel
          </s-button>
        </div>
      </template>
    </s-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)

const active2 = ref(false)
const active3 = ref(false)
const input1 = ref('')
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');

.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.con-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Loading

Add a loading animation to the dialog with the loading property

Code copied

<template>
  <div class="center">
    <s-button color="success" type="flat" @click="active = !active">
      Open Dialog Loading
    </s-button>
    <s-dialog v-model="active" loading>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Not close

You can remove the close button with the not-close property

Code copied

<template>
  <div class="center">
    <s-button type="gradient" @click="active = !active"> Open Dialog </s-button>
    <s-dialog v-model="active" not-close>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>
<style lang="scss" scoped>
@function -color($color, $alpha: 1) {

  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Scroll

There are cases where you need a scroll because there is a lot of information within the dialog for this you can use the scroll property

Code copied

<template>
  <div class="center">
    <s-button type="shadow" @click="active = !active"> Open Dialog </s-button>
    <s-dialog v-model="active" scroll lock-scroll not-close auto-width>
      <template #header>
        <h3>Introduction</h3>
      </template>
      <div class="con-content-scroll">
        <h4>Whats is Sax Design?</h4>
        <p>
          Sax Design (pronounced / vjusacksː /, as view sacks) is a framework of UI
          components created with Vuejs to make projects easily and with a
          unique and pleasant style, Sax Design is created from scratch and designed
          for all types of developers from the frontend lover to the backend who
          wants to easily create their visual approach to the end-user We are
          focused on streamlining the work of the programmer by giving
          components created in their entirety and with independent
          customization and very easy to implement, so creativity is in our
          hands but we do not neglect that each project is different both
          visually and in its ecosystem Sax Design does not have a design line such
          as other component frameworks based on Material Design, we believe
          that there are already emaciated frameworks that look visually and in
          UI / UX and we don't want to be one more of the bunch, apart from that
          we love to create and design new experiences and surprise you with new
          elements or details that we can only do by being visually free.
        </p>

        <h4>Why Sax Design?</h4>

        <p>
          Sax Design is a relatively new framework with a refreshing design and in
          the latest trends, Sax Design based on vuejs which means that we go hand
          in hand with one of the most popular javascript frameworks in the
          world and with a huge community with which you will have all the help
          and documentation to create and make your project
          <br />
          <br />
          - Sax Design, unlike many frameworks, is designed from scratch and we are
          not anchored to any design line, this is something great since your
          project is going to be unique and very different from the others

          <br />
          <br />
          - We are focused on the quick and easy creation of projects giving a
          beautiful visual line but without forgetting the personalization and
          independence of the developer

          <br />
          <br />
          - Sax Design uses native css variables for better customization and
          production changes such as changing to dark theme or changing the main
          color of the entire application with few javascript lines
          <br />
          <br />

          - Sax Design is a frame designed to have a great visual impact and that is
          always in trend with respect to design.
          <br />
          <br />

          - An open-source community to create, improve and correct any
          component or function.
          <br />
          <br />

          - Independent components to avoid importing unnecessary code.
          <br />
          <br />

          - Markdown documents for better sustainability.
          <br />
          <br />

          - and much more.
        </p>
      </div>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
</script>

<style lang="scss" scoped>
.con-content-scroll {
  p {
    margin: 20px 0px;
    position: relative;
    display: block;
    font-size: 0.9rem;
    width: 100%;
  }
}
</style>

Lock scroll Body

If you need to remove the page scroll when opening the dialog you can do it with the lock-scroll property

Code copied

<template>
  <div class="center">
    <s-button type="transparent" @click="active = !active">
      Open Dialog
    </s-button>
    <s-dialog v-model="active" lock-scroll>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Not Padding

If you need to remove the padding from the dialog to make a more personalized interface you can do it with the not-padding property

Code copied

<template>
  <div class="center">
    <s-button type="flat" @click="active = !active">
      Open Dialog Not Padding
    </s-button>
    <s-dialog v-model="active" not-close auto-width not-padding>
      <div class="con-image">
        <img src="/foto1.png" alt="" />
      </div>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
</script>

<style lang="scss" scoped>
.con-image {
  border-radius: inherit;
  img {
    display: block;
    position: relative;
    border-radius: inherit;
    max-width: 350px;
  }
}
</style>

Nested Dialogs

You can nest as many s-dialog as you need without problem

Code copied

<template>
  <div class="center">
    <s-button @click="active = !active"> Open Dialog 1 </s-button>
    <s-dialog v-model="active" lock-scroll>
      <template #header>
        <h3>Nested dialogs</h3>
      </template>
      <div class="con-content">
        <s-button @click="active2 = !active2"> Open Dialog 2 </s-button>
      </div>
    </s-dialog>
    <s-dialog v-model="active2">
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const active2 = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Full Screen

If you need the dialog to be the total window size you can do it with the full-screen property

Code copied

<template>
  <div class="center">
    <s-button type="gradient" color="warn" @click="active = !active">
      Open Dialog
    </s-button>
    <s-dialog v-model="active" lock-scroll full-screen>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Overlay blur

You can add a blur style to all the elements behind the dialog with the overlay-blur property, this functionality depends on the css property backdrop-filter

Code copied

<template>
  <div class="center">
    <s-button dark @click="active = !active"> Open Dialog </s-button>
    <s-dialog v-model="active" overlay-blur>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Shape

Square

Change the dialog style by removing the border radius and making it rectangular

Code copied

<template>
  <div class="center">
    <s-button color="dark" type="flat" shape="square" @click="active = !active">
      Open Dialog
    </s-button>
    <s-dialog v-model="active" shape="square">
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(false)

const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>
@function -color($color, $alpha: 1) {
  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}

  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Prevent Close

With the prevent-close property you do not close the dialog by clicking outside or pressing the esc key

Code copied

<template>
  <div class="center">
    <s-button color="danger" @click="active = !active"> Open Dialog </s-button>
    <s-dialog v-model="active" prevent-close>
      <template #header>
        <h4 class="not-margin">Welcome to <b>Sax Design</b></h4>
      </template>

      <div class="con-form">
        <s-input v-model="input1" placeholder="Email">
          <template #icon> @ </template>
        </s-input>
        <s-input v-model="input2" type="password" placeholder="Password">
          <template #icon>
            <s-icon  name="bxs:lock" />
          </template>
        </s-input>
        <div class="flex">
          <s-checkbox v-model="checkbox1">Remember me</s-checkbox>
          <a href="#">Forgot Password?</a>
        </div>
      </div>

      <template #footer>
        <div class="footer-dialog">
          <s-button block> Sign In </s-button>

          <div class="new">New Here? <a href="#">Create New Account</a></div>
        </div>
      </template>
    </s-dialog>
  </div>
</template>

<script lang="ts" setup>

const active = ref(false)
const input1 = ref('')
const input2 = ref('')
const checkbox1 = ref(false)
</script>

<style lang="scss" scoped>

  @return unquote('rgba(var(--sax-#{$color}), #{$alpha})');
}
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 10px;
}
.con-form {
  width: 100%;
  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      font-size: 0.8rem;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
    }
  }
  .s-checkbox__label {
    font-size: 0.8rem;
  }
  .s-input {
    margin: 10px 0px;
    width: calc(100%);
    .s-input__original {
      width: 100%;
    }
  }
}
.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
  .new {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    font-size: 0.7rem;
    a {
      color: -color('primary') !important;
      margin-left: 6px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .s-button {
    margin: 0px;
  }
}
</style>

Advanced

Use title, content and action-button props when slots would be unnecessary; custom slots keep priority.

API

Code copied

<template>
  <s-button @click="visible = true">Open confirmation</s-button>
  <s-dialog
    v-model="visible"
    title="Archive draft"
    content="This action can be undone from the archive."
    show-footer
    show-cancel-button
    show-confirm-button
    confirm-button-text="Archive"
    @confirm="confirmed = true"
  />
  <p v-if="confirmed">Archived.</p>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)