Toggle

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const alignment = ref('left')
</script>

<template>
  <VToggle v-model="alignment" label="Text alignment">
    <VToggleItem value="left" label="Left" />
    <VToggleItem value="center" label="Centre" />
    <VToggleItem value="right" label="Right" />
  </VToggle>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem, type ToggleItemVariant, type ToggleTone } from 'vectis-ui'

const itemVariants: ToggleItemVariant[] = ['ghost', 'outline']
const tones: ToggleTone[] = ['accent', 'neutral', 'danger']

const byVariant = ref<Record<string, string>>({ ghost: 'week', outline: 'week' })
const byTone = ref<Record<string, string>>({ accent: 'week', neutral: 'week', danger: 'week' })
</script>

<template>
  <div class="demo">
    <!-- `itemVariant` paints the items that are NOT chosen: transparent under `ghost`,
         outlined under `outline`. What the chosen one takes is a separate decision. -->
    <div v-for="variant in itemVariants" :key="variant" class="row">
      <p class="caption">itemVariant {{ variant }}</p>
      <VToggle v-model="byVariant[variant]" :item-variant="variant" :label="`Period, ${variant}`">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <!-- The tone colours the chosen item and nothing else: the rest stay neutral,
         since only one of them is making a claim. -->
    <div v-for="tone in tones" :key="tone" class="row">
      <p class="caption">tone {{ tone }}</p>
      <VToggle
        v-model="byTone[tone]"
        :tone="tone"
        item-variant="outline"
        :label="`Period, ${tone}`"
      >
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem, type ToggleSelectedVariant } from 'vectis-ui'

const variants: ToggleSelectedVariant[] = ['solid', 'soft', 'ghost']
const selected = ref<Record<string, string>>({ solid: 'week', soft: 'week', ghost: 'week' })
</script>

<template>
  <div class="demo">
    <!-- How the chosen item is drawn, in the group's tone: filled with `solid`, tinted
         with `soft`, or the colour of its text alone with `ghost`. Solid is the loudest
         and the safest default; ghost is for a row that must stay quiet, where the
         difference rests on the text colour alone. -->
    <div v-for="variant in variants" :key="variant" class="row">
      <p class="caption">{{ variant }}</p>
      <VToggle
        v-model="selected[variant]"
        :selected-variant="variant"
        item-variant="outline"
        :label="`Period, ${variant}`"
      >
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem, type ToggleSize } from 'vectis-ui'

const sizes: ToggleSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
const selected = ref<Record<string, string>>({
  xs: 'week',
  sm: 'week',
  md: 'week',
  lg: 'week',
  xl: 'week',
  compact: 'week',
})
</script>

<template>
  <div class="demo">
    <!-- The scale shared by every control, set once on the group: each item is a
         button of that size, so a toggle row and a button beside it line up. -->
    <div v-for="size in sizes" :key="size" class="row">
      <p class="caption">{{ size }}</p>
      <VToggle v-model="selected[size]" :size="size" :label="`Period, ${size}`">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <div class="row">
      <p class="caption">md compact</p>
      <VToggle v-model="selected.compact" size="md" compact label="Period, compact">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VBadge, VToggle, VToggleItem } from 'vectis-ui'
import {
  audio_file as audioFile,
  image,
  info,
  search,
  video_file as videoFile,
} from 'vectis-ui/icons'

const kind = ref('images')
const view = ref('list')
</script>

<template>
  <div class="demo">
    <!-- A label, an icon at either end, or both. The icon at the end is for what the
         item carries rather than what it is. -->
    <VToggle v-model="kind" item-variant="outline" label="Media">
      <VToggleItem value="images" label="Images" :icon-start="image" />
      <VToggleItem value="video" label="Video" :icon-start="videoFile" />
      <VToggleItem value="audio" label="Audio" :icon-start="audioFile" :icon-end="info" />
    </VToggle>

    <!-- An item reduced to its icon still has to say what it is: with no label there
         is no accessible name left, so one is given here. -->
    <VToggle v-model="view" item-variant="outline" label="View">
      <VToggleItem value="list" :icon-start="search" aria-label="Search" />
      <VToggleItem value="grid" :icon-start="image" aria-label="Thumbnails" />

      <!-- The default slot replaces the label, for anything a string cannot hold. -->
      <VToggleItem value="flagged">
        <VBadge :count="4">Flagged</VBadge>
      </VToggleItem>
    </VToggle>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'
import { audio_file as audioFile, image, video_file as videoFile } from 'vectis-ui/icons'

const kind = ref('images')
</script>

<template>
  <!-- The chosen item draws its icon in the filled form, a common way of reinforcing
       which one is in effect, and the one that reads without relying on colour alone.
       It names the icon standing FOR the item, so only the one at the start is
       switched; a trailing icon keeps its outline. Nothing happens to an icon that has
       no filled form, the library shipping a second drawing only where the fill really
       changes the geometry. -->
  <VToggle v-model="kind" selected-icon-filled item-variant="outline" label="Media">
    <VToggleItem value="images" label="Images" :icon-start="image" />
    <VToggleItem value="video" label="Video" :icon-start="videoFile" />
    <VToggleItem value="audio" label="Audio" :icon-start="audioFile" />
  </VToggle>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const joined = ref('week')
const detached = ref('week')
</script>

<template>
  <div class="demo">
    <!-- Joined by default: the items melt into one segmented control, which is what
         says they are one choice. -->
    <div class="row">
      <p class="caption">joined, the default</p>
      <VToggle v-model="joined" item-variant="outline" label="Period, joined">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <!-- Detached leaves them as separate buttons with a gap, which suits a row of
         filters that happen to share a model more than it suits one exclusive choice. -->
    <div class="row">
      <p class="caption">detached</p>
      <VToggle v-model="detached" detached item-variant="outline" label="Period, detached">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const segmented = ref('week')
const seamless = ref('week')
</script>

<template>
  <div class="demo">
    <!-- Joined, a line is drawn between two items: the row reads as a set of segments,
         each one of them a target. -->
    <div class="row">
      <p class="caption">with the seams</p>
      <VToggle v-model="segmented" item-variant="outline" label="Period, segmented">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <!-- Seamless takes those lines out, and the row reads as one frame holding a
         highlight that moves. It has no effect under `detached`, where the items are
         separate buttons already. -->
    <div class="row">
      <p class="caption">seamless</p>
      <VToggle v-model="seamless" seamless item-variant="outline" label="Period, seamless">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const natural = ref('week')
const filling = ref('week')
</script>

<template>
  <div class="column">
    <VToggle v-model="natural" item-variant="outline" label="Period, as wide as its labels">
      <VToggleItem value="day" label="Day" />
      <VToggleItem value="week" label="Week" />
      <VToggleItem value="month" label="Month" />
    </VToggle>

    <!-- Every item takes an equal share of the width, whatever its label measures. -->
    <VToggle v-model="filling" full-width item-variant="outline" label="Period, filling the column">
      <VToggleItem value="day" label="Day" />
      <VToggleItem value="week" label="Week" />
      <VToggleItem value="month" label="Month" />
    </VToggle>
  </div>
</template>

<style scoped>
/* A column narrower than the page, so that filling it is something to see. */
.column {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--vectis-space-3);
  inline-size: 320px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const period = ref('week')
</script>

<template>
  <!-- The row is raised off the page, and the shadow belongs to the row rather than to
       each item: segments overlap by a pixel, so a shadow per item would fall on its
       neighbour and fill every joint with a dark band instead of lifting one object.
       The whole row rises together on hover for the same reason. -->
  <VToggle v-model="period" elevated item-variant="ghost" label="Period">
    <VToggleItem value="day" label="Day" />
    <VToggleItem value="week" label="Week" />
    <VToggleItem value="month" label="Month" />
  </VToggle>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const joined = ref('week')
const detached = ref('week')
</script>

<template>
  <div class="demo">
    <!-- Down the page instead of across. The joins move to the horizontal edges, the
         corners are carved at the top and the bottom of the column, and the arrow keys
         follow the axis. -->
    <VToggle v-model="joined" orientation="vertical" item-variant="outline" label="Period">
      <VToggleItem value="day" label="Day" />
      <VToggleItem value="week" label="Week" />
      <VToggleItem value="month" label="Month" />
    </VToggle>

    <VToggle
      v-model="detached"
      orientation="vertical"
      detached
      item-variant="outline"
      label="Period, detached"
    >
      <VToggleItem value="day" label="Day" />
      <VToggleItem value="week" label="Week" />
      <VToggleItem value="month" label="Month" />
    </VToggle>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  align-items: start;
  gap: var(--vectis-space-8);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'
import {
  audio_file as audioFile,
  description,
  image,
  video_file as videoFile,
} from 'vectis-ui/icons'

// In multiple mode the value is a list, and it is never mutated in place: each change
// hands back a new array, which is what wakes a watcher bound to it.
const kinds = ref(['images', 'video'])
</script>

<template>
  <div class="demo">
    <!-- Several items at once, which turns the exclusive choice into a set of filters.
         Clicking a chosen item gives it up again. -->
    <VToggle v-model="kinds" multiple item-variant="outline" selected-icon-filled label="Media">
      <VToggleItem value="images" label="Images" :icon-start="image" />
      <VToggleItem value="video" label="Video" :icon-start="videoFile" />
      <VToggleItem value="audio" label="Audio" :icon-start="audioFile" />
      <VToggleItem value="documents" label="Documents" :icon-start="description" />
    </VToggle>

    <p class="value">{{ kinds.length ? kinds.join(', ') : 'Nothing selected' }}</p>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
.value {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const period = ref('week')
const kinds = ref(['images'])
</script>

<template>
  <div class="demo">
    <!-- Clicking the chosen item normally gives it up, leaving nothing selected.
         `mandatory` refuses that last step, so a row that has an answer keeps one. It
         is a guard and nothing more: it selects nothing on its own at the start, and a
         group that begins empty stays empty until something is clicked. -->
    <div class="row">
      <p class="caption">one choice</p>
      <VToggle v-model="period" mandatory item-variant="outline" label="Period">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <!-- With several, it is the last remaining one that cannot be given up. -->
    <div class="row">
      <p class="caption">several, the last one held</p>
      <VToggle v-model="kinds" multiple mandatory item-variant="outline" label="Media">
        <VToggleItem value="images" label="Images" />
        <VToggleItem value="video" label="Video" />
        <VToggleItem value="audio" label="Audio" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VToggle, VToggleItem } from 'vectis-ui'

const group = ref('week')
const item = ref('day')
</script>

<template>
  <div class="demo">
    <!-- The whole group at once: nothing responds and no item takes focus. -->
    <div class="row">
      <p class="caption">the group</p>
      <VToggle v-model="group" disabled item-variant="outline" label="Period, disabled">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>

    <!-- Or a single item, which stops responding and which the arrow keys step over as
         though it were not in the row. Both grey out through the colour tokens rather
         than through an opacity, so they keep their contrast. -->
    <div class="row">
      <p class="caption">one item</p>
      <VToggle v-model="item" item-variant="outline" label="Period">
        <VToggleItem value="day" label="Day" />
        <VToggleItem value="week" label="Week" disabled />
        <VToggleItem value="month" label="Month" />
      </VToggle>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-5);
}
.row {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.caption {
  margin: 0;
  color: var(--vectis-color-text-muted);
  font-size: var(--vectis-text-caption-size);
}
</style>