Toggle

<script setup lang="ts">
  import { Toggle } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const saved = shallowRef(false)
</script>

<template>
  <div class="flex justify-center">
    <Toggle.Root
      v-model="saved"
      class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-divider font-medium data-[state=on]:bg-primary data-[state=on]:text-on-primary data-[state=on]:border-primary"
    >
      <svg
        class="size-5 data-[state=off]:opacity-40"
        :data-state="saved ? 'on' : 'off'"
        stroke="currentColor"
        stroke-width="2"
        viewBox="0 0 24 24"
      >
        <path
          d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"
          :fill="saved ? 'currentColor' : 'none'"
        />
      </svg>

      Bookmark
    </Toggle.Root>
  </div>
</template>

<script setup lang="ts">
  import { Toggle } from '@vuetify/v0'
  import { ref } from 'vue'

  const formatting = ref<string[]>([])
</script>

<template>
  <div class="rounded-lg border border-divider overflow-hidden">
    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-divider bg-surface-variant/30">
      <Toggle.Group v-model="formatting" class="inline-flex gap-2 rounded overflow-hidden" multiple>
        <Toggle.Root
          class="size-8 flex items-center justify-center py-1 font-bold text-sm text-on-surface-variant rounded data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="bold"
        >
          B
        </Toggle.Root>

        <Toggle.Root
          class="size-8 flex items-center justify-center py-1 italic text-sm text-on-surface-variant rounded data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="italic"
        >
          I
        </Toggle.Root>

        <Toggle.Root
          class="size-8 flex items-center justify-center py-1 underline text-sm text-on-surface-variant rounded data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="underline"
        >
          U
        </Toggle.Root>

        <Toggle.Root
          class="size-8 flex items-center justify-center py-1 line-through text-sm text-on-surface-variant rounded data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="strikethrough"
        >
          S
        </Toggle.Root>
      </Toggle.Group>
    </div>

    <p
      class="px-4 py-3 text-sm leading-relaxed"
      :class="{
        'font-bold': formatting.includes('bold'),
        'italic': formatting.includes('italic'),
        'underline': formatting.includes('underline'),
        'line-through': formatting.includes('strikethrough'),
      }"
    >
      The quick brown fox jumps over the lazy dog. This sentence demonstrates how your formatting selections apply in real time.
    </p>
  </div>
</template>

<script setup lang="ts">
  import { Toggle } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const view = shallowRef('grid')

  const items = [
    { title: 'Photos', count: 248 },
    { title: 'Documents', count: 53 },
    { title: 'Music', count: 112 },
    { title: 'Videos', count: 37 },
    { title: 'Archives', count: 19 },
    { title: 'Downloads', count: 84 },
  ]
</script>

<template>
  <div class="flex flex-col gap-6">
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium text-on-surface-variant">{{ items.length }} folders</span>

      <Toggle.Group v-model="view" class="inline-flex rounded-lg border border-divider overflow-hidden" mandatory>
        <Toggle.Root
          class="p-2 transition-colors data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="grid"
        >
          <svg
            class="size-5"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
          >
            <rect
              height="7"
              rx="1"
              width="7"
              x="3"
              y="3"
            />
            <rect
              height="7"
              rx="1"
              width="7"
              x="14"
              y="3"
            />
            <rect
              height="7"
              rx="1"
              width="7"
              x="3"
              y="14"
            />
            <rect
              height="7"
              rx="1"
              width="7"
              x="14"
              y="14"
            />
          </svg>
        </Toggle.Root>

        <Toggle.Root
          class="p-2 border-l border-divider transition-colors data-[state=on]:bg-primary data-[state=on]:text-on-primary"
          value="list"
        >
          <svg
            class="size-5"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
          >
            <line x1="3" x2="21" y1="6" y2="6" />
            <line x1="3" x2="21" y1="12" y2="12" />
            <line x1="3" x2="21" y1="18" y2="18" />
          </svg>
        </Toggle.Root>
      </Toggle.Group>
    </div>

    <div
      :class="view === 'grid'
        ? 'grid grid-cols-3 gap-4'
        : 'flex flex-col gap-2'"
    >
      <div
        v-for="item in items"
        :key="item.title"
        :class="view === 'grid'
          ? 'flex flex-col items-center gap-2 p-4 rounded-lg border border-divider'
          : 'flex items-center justify-between px-4 py-3 rounded-lg border border-divider'"
      >
        <svg
          class="text-on-surface-variant"
          :class="view === 'grid' ? 'size-8' : 'size-5'"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          viewBox="0 0 24 24"
        >
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
        </svg>

        <div :class="view === 'grid' ? 'text-center' : 'flex-1 ml-3'">
          <div class="text-sm font-medium">{{ item.title }}</div>
          <div class="text-xs text-on-surface-variant">{{ item.count }} items</div>
        </div>
      </div>
    </div>
  </div>
</template>