Empty state

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

<template>
  <VEmptyState
    :icon="description"
    title="No invoices yet"
    description="Invoices you create or import appear here."
  >
    <template #actions>
      <VButton>Create an invoice</VButton>
      <VButton variant="outline" tone="neutral">Import</VButton>
    </template>
  </VEmptyState>
</template>

<script setup lang="ts">
import { VEmptyState } from 'vectis-ui'
import type { EmptyStateSize } from 'vectis-ui'
import { inbox } from 'vectis-ui/icons'

const SIZES: { size: EmptyStateSize; title: string }[] = [
  { size: 'sm', title: 'Nothing in this folder' },
  { size: 'md', title: 'No messages' },
  { size: 'lg', title: 'Your workspace is empty' },
]
</script>

<template>
  <div class="stack">
    <VEmptyState
      v-for="item in SIZES"
      :key="item.size"
      class="frame"
      :size="item.size"
      :icon="inbox"
      :title="item.title"
      description="The scale follows the space it fills."
    />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-4);
}

.frame {
  border: 1px dashed var(--vectis-color-border);
  border-radius: var(--vectis-radius-surface);
}
</style>

<script setup lang="ts">
import { VEmptyState } from 'vectis-ui'
import { notifications } from 'vectis-ui/icons'
</script>

<template>
  <VEmptyState :icon="notifications" title="You are all caught up" :heading-level="2">
    New mentions and replies show up here. Choose what you hear about in your
    <a href="#content">notification settings</a>.
  </VEmptyState>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VCombobox, VDataTable, VEmptyState } from 'vectis-ui'
import { inbox } from 'vectis-ui/icons'

const COLUMNS = [
  { key: 'name', label: 'Name' },
  { key: 'status', label: 'Status' },
]

const OPTIONS = [
  { value: 'fr', label: 'France' },
  { value: 'de', label: 'Germany' },
]

const country = ref('')
</script>

<template>
  <div class="stack">
    <VDataTable :columns="COLUMNS" :rows="[]" empty-text="No orders" />

    <VDataTable :columns="COLUMNS" :rows="[]">
      <template #empty>
        <VEmptyState
          size="sm"
          :icon="inbox"
          title="No orders yet"
          description="Orders placed by your customers appear here."
        >
          <template #actions>
            <VButton size="sm">Create an order</VButton>
          </template>
        </VEmptyState>
      </template>
    </VDataTable>

    <VCombobox
      v-model="country"
      class="combobox"
      :options="OPTIONS"
      label="Country"
      empty-text="No country found"
    />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-6);
}

.combobox {
  max-inline-size: 18rem;
}
</style>