Snackbar

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'

function remove() {
  snackbar({ message: 'Message deleted.', actionText: 'Undo', action: () => {} })
}
</script>

<template>
  <!-- Mount <VSnackbar /> once, at the root of your application. This site does it in its layout,
       which is why the example does not: a second one would render the same bar twice. -->
  <VButton variant="outline" tone="neutral" @click="remove">Delete</VButton>
</template>

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <div class="demo">
    <!-- Two tones and deliberately no more: a confirmation says either "done" or "that
         did not work". Success, warning and the accent are states, which is what a
         notification reports. -->
    <VButton
      variant="outline"
      tone="neutral"
      @click="snackbar({ message: 'Conversation archived.', action: () => {} })"
    >
      Archive
    </VButton>

    <VButton
      variant="outline"
      tone="danger"
      @click="
        snackbar({
          tone: 'danger',
          message: 'Could not save your changes.',
          actionText: 'Retry',
          action: () => {},
        })
      "
    >
      Failing action
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <!-- No `action`, no button at all. The bar is then a plain statement of what just
       happened, and it takes itself away on its own. -->
  <VButton variant="outline" tone="neutral" @click="snackbar({ message: 'Settings saved.' })">
    Save
  </VButton>
</template>

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'
import { cloud_upload as cloudUpload } from 'vectis-ui/icons'
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <!-- An icon is opt-in, and none is deduced from the tone: a confirmation is read,
       not scanned, so the words carry it and the icon only ever adds to them. -->
  <VButton
    variant="outline"
    tone="neutral"
    @click="snackbar({ message: 'File uploaded.', icon: cloudUpload, action: () => {} })"
  >
    Upload
  </VButton>
</template>

<script setup lang="ts">
import { VButton, snackbar, type SnackbarPlacement } from 'vectis-ui'

const placements: SnackbarPlacement[] = ['bottom-left', 'bottom-center', 'bottom-right']
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <div class="demo">
    <!-- Along the bottom edge and nowhere else: a confirmation belongs where it is out
         of the content's way and close to what the reader was doing. Set on the
         VSnackbar it is the default for every bar; passed here it is this bar's own. -->
    <VButton
      v-for="placement in placements"
      :key="placement"
      variant="outline"
      tone="neutral"
      @click="snackbar({ placement, message: `Raised at ${placement}.`, action: () => {} })"
    >
      {{ placement }}
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <div class="demo">
    <!-- There is at most one bar. Raising a second replaces the first on the spot and
         restarts the countdown from the top, which is what separates a confirmation
         from a notification: two states can be true at once, but only the last action
         a reader took is worth offering to undo. -->
    <VButton
      variant="outline"
      tone="neutral"
      @click="snackbar({ message: 'Message deleted.', duration: 0, action: () => {} })"
    >
      Delete
    </VButton>

    <VButton
      variant="outline"
      tone="neutral"
      @click="snackbar({ message: 'Conversation archived.', duration: 0, action: () => {} })"
    >
      Archive
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VButton, snackbar } from 'vectis-ui'
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <div class="demo">
    <!-- Four seconds by default, shorter than a notification's: the reader already
         knows what the bar says, having just done it. The countdown holds while the
         pointer rests on the bar and while the keyboard is inside it, so an action
         being reached for is never taken away mid-reach. -->
    <VButton
      variant="outline"
      tone="neutral"
      @click="snackbar({ message: 'Gone in 1.5 seconds.', duration: 1500, action: () => {} })"
    >
      1.5 seconds
    </VButton>

    <VButton
      variant="outline"
      tone="neutral"
      @click="snackbar({ message: 'Gone in 8 seconds.', duration: 8000, action: () => {} })"
    >
      8 seconds
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, dismissSnackbar, snackbar } from 'vectis-ui'

const id = ref<number | null>(null)

function raise() {
  // `snackbar` hands back an id, which is what lets this bar be taken away later and
  // only this one: a stale id is ignored rather than closing whatever replaced it.
  id.value = snackbar({ message: 'Stays until you take it away.', duration: 0 })
}
</script>

<template>
  <!-- Raised into the <VSnackbar /> mounted once at the root of the application. -->
  <div class="demo">
    <!-- A duration of 0 disarms the countdown: the bar then stays until something
         replaces it or takes it away. Reserve it for a confirmation the reader has to
         act on, and give it a way out. -->
    <VButton variant="outline" tone="neutral" @click="raise">Raise</VButton>

    <VButton variant="outline" tone="neutral" @click="dismissSnackbar(id ?? undefined)">
      Dismiss
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>