Drawer

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

const open = ref(false)
const pending = ref(true)
const shipped = ref(false)
const refunded = ref(false)

function reset() {
  pending.value = false
  shipped.value = false
  refunded.value = false
}
</script>

<template>
  <VDrawer v-model:open="open" title="Filters" subtitle="Narrow the list of orders.">
    <template #trigger="{ triggerProps }">
      <VButton v-bind="triggerProps">Filters</VButton>
    </template>
    <div class="options">
      <VCheckbox v-model="pending">Pending</VCheckbox>
      <VCheckbox v-model="shipped">Shipped</VCheckbox>
      <VCheckbox v-model="refunded">Refunded</VCheckbox>
    </div>
    <template #footer>
      <VButton variant="ghost" tone="neutral" @click="reset">Reset</VButton>
      <VButton @click="open = false">Apply</VButton>
    </template>
  </VDrawer>
</template>

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

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VDrawer, VTypography } from 'vectis-ui'
import type { DrawerSide } from 'vectis-ui'

const SIDES: DrawerSide[] = ['start', 'end', 'top', 'bottom']

const opened = ref<DrawerSide | null>(null)
</script>

<template>
  <div class="row">
    <VButton
      v-for="side in SIDES"
      :key="side"
      variant="outline"
      tone="neutral"
      @click="opened = side"
    >
      {{ side }}
    </VButton>
  </div>

  <VDrawer
    v-for="side in SIDES"
    :key="side"
    :side="side"
    :open="opened === side"
    :title="`From ${side}`"
    subtitle="The drawer slides in from this edge."
    @update:open="(value) => !value && (opened = null)"
  >
    <VTypography>
      In a right-to-left page, start is the right edge and end the left one.
    </VTypography>
  </VDrawer>
</template>

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

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VDrawer, VTypography } from 'vectis-ui'
import type { DrawerSize } from 'vectis-ui'

const SIZES: DrawerSize[] = ['sm', 'md', 'lg']

const opened = ref<string | null>(null)
</script>

<template>
  <div class="row">
    <VButton
      v-for="size in SIZES"
      :key="size"
      variant="outline"
      tone="neutral"
      @click="opened = size"
    >
      {{ size }}
    </VButton>
    <VButton variant="outline" tone="neutral" @click="opened = 'extent'">extent="50vw"</VButton>
  </div>

  <VDrawer
    v-for="size in SIZES"
    :key="size"
    :size="size"
    :open="opened === size"
    :title="`Size ${size}`"
    @update:open="(value) => !value && (opened = null)"
  >
    <VTypography>On a narrow screen the drawer leaves a strip of the page uncovered.</VTypography>
  </VDrawer>
  <VDrawer
    extent="50vw"
    :open="opened === 'extent'"
    title="Half the viewport"
    @update:open="(value) => !value && (opened = null)"
  >
    <VTypography>The extent is a CSS length, in any unit.</VTypography>
  </VDrawer>
</template>

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

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

const open = ref(false)

const PAGES = [
  'Overview',
  'Activity',
  'Orders',
  'Invoices',
  'Customers',
  'Products',
  'Inventory',
  'Shipping',
  'Returns',
  'Discounts',
  'Reports',
  'Analytics',
  'Integrations',
  'Team',
  'Billing',
  'Settings',
]
</script>

<template>
  <VDrawer v-model:open="open" side="start" size="sm" title="Store">
    <template #trigger="{ triggerProps }">
      <VButton v-bind="triggerProps" variant="outline" tone="neutral">Menu</VButton>
    </template>
    <VSideNavigation label="Store">
      <VSideNavigationItem
        v-for="(page, index) in PAGES"
        :key="page"
        href="#navigation"
        :current="index === 0"
        @select="open = false"
      >
        {{ page }}
      </VSideNavigationItem>
    </VSideNavigation>
    <template #footer>
      <VButton variant="ghost" tone="neutral" @click="open = false">Sign out</VButton>
    </template>
  </VDrawer>
</template>