Added character list in search

src/components/calendar/CalendarEvent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Popover, PopoverTrigger } from '@/components/ui/popover'
-import type { CalendarEvent } from '@/stores/events'
+import type { CalendarEvent } from '@/models/Events'
 import CalendarEventDetails from './CalendarEventDetails.vue'
 
 defineProps<{

src/components/calendar/CalendarEventDetails.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { PopoverContent } from '@/components/ui/popover'
+import type { CalendarEvent } from '@/models/Events'
 import { useCalendar } from '@/stores/calendar'
-import type { CalendarEvent } from '@/stores/events'
 
 const { getFormattedDateTitle } = useCalendar()
 

src/components/calendar/CalendarMenu.vue

@@ -3,7 +3,7 @@ import { useCalendar } from '@/stores/calendar'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
-import CalendarMenuSearch from './CalendarMenuSearch.vue'
+import CalendarSearch from './search/CalendarSearch.vue'
 
 const { currentDate } = useCalendar()
 </script>
@@ -31,7 +31,7 @@ const { currentDate } = useCalendar()
           </div>
         </div>
         <div class="md:col-span-3 flex justify-end">
-          <CalendarMenuSearch />
+          <CalendarSearch />
         </div>
       </div>
     </div>

src/components/calendar/CalendarMenuNav.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/calendar'
-import Button from '../ui/button/Button.vue'
 import {
   PhCaretDoubleLeft,
   PhCaretDoubleRight,
   PhCaretLeft,
   PhCaretRight
 } from '@phosphor-icons/vue'
+import Button from '../ui/button/Button.vue'
 
 const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
 </script>

src/components/calendar/CalendarMenuSearch.vue

@@ -1,89 +0,0 @@
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
-import { useCalendarEvents } from '@/stores/events'
-import CalendarMenuSearchResults from './CalendarMenuSearchResults.vue'
-import { useMagicKeys, whenever } from '@vueuse/core'
-
-const { allEvents } = useCalendarEvents()
-
-const modalOpen = ref(false)
-
-const searchQuery = ref('')
-const searchEnough = computed(() => searchQuery.value.length >= 2)
-const displaySearch = computed(() => searchQuery.value && searchEnough.value)
-
-const unifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
-
-const searchResults = computed(() => {
-  return allEvents.filter((event) => {
-    const queryString = new String(searchQuery.value).replace(unifier, '').toLocaleLowerCase()
-    const hitTitle = event.title.replace(unifier, '').toLocaleLowerCase().includes(queryString)
-    const hitDesc = event.description
-      ?.replace(unifier, '')
-      .toLocaleLowerCase()
-      .includes(queryString)
-
-    return hitTitle || hitDesc
-  })
-})
-
-function resetSearch() {
-  searchQuery.value = ''
-}
-
-function openDialog() {
-  modalOpen.value = true
-}
-
-function closeDialog() {
-  modalOpen.value = false
-}
-
-// Key combos to deploy modal
-const keys = useMagicKeys()
-
-whenever(keys.control_period, () => {
-  openDialog()
-})
-</script>
-
-<template>
-  <Dialog v-model:open="modalOpen" @update:open="resetSearch">
-    <DialogTrigger>
-      <Button search-slash>
-        <PhMagnifyingGlass size="20" weight="light" />
-        Recherche avancée
-      </Button>
-    </DialogTrigger>
-
-    <DialogContent
-      class="flex flex-col flex-nowrap top-32 -translate-y-0 data-[state=closed]:slide-out-to-top-[2rem] data-[state=open]:slide-in-from-top-[2rem]"
-      :class="{
-        'bottom-16': displaySearch && searchResults.length > 0
-      }"
-    >
-      <div class="relative w-full h-fit">
-        <Input
-          id="search"
-          type="text"
-          placeholder="Rechercher un évènement, un personnage…"
-          class="pl-10 py-6 text-lg"
-          v-model:model-value="searchQuery"
-          autocomplete="off"
-        />
-        <span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
-          <PhMagnifyingGlass size="20" />
-        </span>
-      </div>
-
-      <div v-if="displaySearch && searchResults.length > 0" class="overflow-y-auto">
-        <hr class="mb-4" />
-        <CalendarMenuSearchResults :events="searchResults" @jumped-to-date="closeDialog()" />
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>

src/components/calendar/CalendarMenuSearchResults.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import type { LeimDate } from '@/models/Date'
-import { useCalendar } from '@/stores/calendar'
-import type { CalendarEvent } from '@/stores/events'
-
-defineProps<{
-  events: CalendarEvent[]
-}>()
-
-const emit = defineEmits(['jumpedToDate'])
-
-const { jumpToDate } = useCalendar()
-
-function handleJumpToDate(date: LeimDate) {
-  jumpToDate(date)
-  emit('jumpedToDate')
-}
-</script>
-
-<template>
-  <ul class="grid gap-3">
-    <li v-for="e in events" :key="e.title">
-      <button
-        class="block w-full text-left p-2 rounded-sm"
-        :class="{
-          'bg-slate-600 hover:bg-slate-700': !e.category,
-          'bg-green-700 hover:bg-green-800': e.category === 'birth',
-          'bg-stone-600 hover:bg-stone-800': e.category === 'death',
-          'bg-red-600 hover:bg-red-800': e.category === 'catastrophe',
-          'bg-pink-600 hover:bg-pink-800': e.category === 'natural-disaster',
-          'bg-blue-600 hover:bg-blue-800': e.category === 'legal',
-          'bg-amber-700 hover:bg-amber-800': e.category === 'player'
-        }"
-        @click="handleJumpToDate(e.date)"
-      >
-        <div>
-          {{ e.title }}
-        </div>
-
-        <div v-if="e.description" class="text-sm">
-          <hr class="my-2 border-white opacity-25" />
-          <span class="opacity-75">
-            {{ e.description }}
-          </span>
-        </div>
-      </button>
-    </li>
-  </ul>
-</template>

src/components/calendar/CalendarSwitch.vue

@@ -7,10 +7,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import Button from '../ui/button/Button.vue'
 import { useCalendar } from '@/stores/calendar'
-import { computed } from 'vue'
 import { PhCalendarBlank } from '@phosphor-icons/vue'
+import { computed } from 'vue'
+import Button from '../ui/button/Button.vue'
 
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
 

src/components/calendar/CalendarTile.vue

@@ -2,9 +2,9 @@
 import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
 import { useCalendarEvents } from '@/stores/events'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import CalendarEvent from './CalendarEvent.vue'
-import { storeToRefs } from 'pinia'
 
 const props = defineProps<{
   date: LeimDate

src/components/calendar/Search.ts

@@ -0,0 +1,3 @@
+export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
+
+export type SearchMode = 'characters' | 'events' | undefined

src/components/calendar/search/CalendarSearch.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { useCharacters } from '@/stores/characters'
+import { useCalendarEvents } from '@/stores/events'
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { searchUnifier, type SearchMode } from '../Search'
+import SearchList from './lists/SearchList.vue'
+import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
+import { isCharacter, type Character } from '@/models/Characters'
+
+const { characters } = useCharacters()
+const { baseEvents } = useCalendarEvents()
+
+const modalOpen = ref(false)
+
+const searchQuery = ref('')
+const searchEnough = computed(() => searchQuery.value.length >= 2)
+
+const selectedEntity = useStorage('se', undefined as SearchMode)
+
+const searchResults = computed(() => {
+  let results: (Character | CalendarEvent)[] = []
+  let dataToFilter: Character[] | CalendarEvent[] | (Character | CalendarEvent)[]
+
+  // Assign data to loop over and filter
+  // They are assigned this way for readability
+  if (selectedEntity.value === 'events') {
+    dataToFilter = baseEvents
+  } else if (selectedEntity.value === 'characters') {
+    dataToFilter = characters
+  } else {
+    dataToFilter = [...baseEvents, ...characters]
+  }
+
+  results = dataToFilter.filter((item) => {
+    // Filter calendar events
+    if (isCalendarEvent(item)) {
+      const queryString = new String(searchQuery.value)
+        .replace(searchUnifier, '')
+        .toLocaleLowerCase()
+
+      const hitTitle = item.title
+        .replace(searchUnifier, '')
+        .toLocaleLowerCase()
+        .includes(queryString)
+      const hitDesc = item.description
+        ?.replace(searchUnifier, '')
+        .toLocaleLowerCase()
+        .includes(queryString)
+
+      return hitTitle || hitDesc
+    }
+
+    // Filter characters
+    if (isCharacter(item)) {
+      const queryString = new String(searchQuery.value)
+        .replace(searchUnifier, '')
+        .toLocaleLowerCase()
+
+      const hitTitle = item.name
+        .replace(searchUnifier, '')
+        .toLocaleLowerCase()
+        .includes(queryString)
+
+      return hitTitle
+    }
+  })
+
+  return results
+})
+
+function resetSearch() {
+  searchQuery.value = ''
+}
+
+const resetSearchLazy = useTimeoutFn(() => {
+  resetSearch()
+}, 300)
+
+function openDialog() {
+  modalOpen.value = true
+}
+
+function closeDialog() {
+  modalOpen.value = false
+}
+
+// Key combos to deploy modal
+const keys = useMagicKeys()
+
+whenever(keys.control_period, () => {
+  openDialog()
+})
+</script>
+
+<template>
+  <Dialog v-model:open="modalOpen" @update:open="resetSearchLazy.start">
+    <DialogTrigger>
+      <Button search-slash>
+        <PhMagnifyingGlass size="20" weight="light" />
+        Recherche avancée
+      </Button>
+    </DialogTrigger>
+
+    <DialogContent
+      class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
+      :class="{
+        'bottom-16': searchResults.length > 0
+      }"
+    >
+      <div class="relative w-full h-fit">
+        <Input
+          id="search"
+          type="text"
+          placeholder="Rechercher le calendrier"
+          class="pl-10 py-6 text-lg"
+          v-model:model-value="searchQuery"
+          autocomplete="off"
+        />
+        <span class="absolute start-1 inset-y-0 flex items-center justify-center px-2 opacity-50">
+          <PhMagnifyingGlass size="20" />
+        </span>
+      </div>
+
+      <ToggleGroup type="single" class="justify-start" v-model="selectedEntity">
+        <ToggleGroupItem value="events" aria-label="Uniquement les évènements">
+          Évènements
+        </ToggleGroupItem>
+        <ToggleGroupItem value="characters" aria-label="Uniquement les personnages">
+          Personnages
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <hr />
+
+      <div v-if="searchResults.length > 0" class="overflow-y-auto">
+        <SearchList
+          :results="searchResults"
+          :current-entity="selectedEntity"
+          @jumped-to-date="closeDialog()"
+        />
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

src/components/calendar/search/lists/SearchList.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { Button } from '@/components/ui/button'
+import { isCharacter, type Character } from '@/models/Characters'
+import type { LeimDate } from '@/models/Date'
+import { isCalendarEvent, type CalendarEvent } from '@/models/Events'
+import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
+import type { SearchMode } from '../../Search'
+
+const props = defineProps<{
+  results: (Character | CalendarEvent)[]
+  currentEntity: SearchMode
+}>()
+
+const emit = defineEmits(['jumpedToDate'])
+
+const { getFormattedDateTitle, jumpToDate } = useCalendar()
+
+function handleJumpToDate(date?: LeimDate) {
+  if (!date) return
+
+  jumpToDate(date)
+  emit('jumpedToDate')
+}
+
+const searchLimit = 10
+const activeSearchLimit = computed<number>(() => (!props.currentEntity ? searchLimit : 9999))
+
+const resultsToDisplay = computed(() => props.results.slice(0, activeSearchLimit.value))
+</script>
+
+<template>
+  <ul class="grid gap-3">
+    <li v-for="r in resultsToDisplay" :key="isCalendarEvent(r) ? r.title : r.name">
+      <button
+        v-if="isCalendarEvent(r)"
+        class="block w-full text-left p-2 rounded-sm"
+        :class="{
+          'bg-slate-600 hover:bg-slate-700': !r.category,
+          'bg-green-700 hover:bg-green-800': r.category === 'birth',
+          'bg-stone-600 hover:bg-stone-800': r.category === 'death',
+          'bg-red-600 hover:bg-red-800': r.category === 'catastrophe',
+          'bg-pink-600 hover:bg-pink-800': r.category === 'natural-disaster',
+          'bg-blue-600 hover:bg-blue-800': r.category === 'legal',
+          'bg-amber-700 hover:bg-amber-800': r.category === 'player'
+        }"
+        @click="handleJumpToDate(r.date)"
+      >
+        <div>
+          {{ r.title }}
+        </div>
+
+        <div>
+          <span class="opacity-75 italic">{{ getFormattedDateTitle(r.date, true) }}</span>
+        </div>
+
+        <div v-if="r.description" class="text-sm">
+          <hr class="my-2 border-white opacity-25" />
+          <span class="opacity-75">
+            {{ r.description }}
+          </span>
+        </div>
+      </button>
+
+      <div
+        v-else-if="isCharacter(r)"
+        class="block w-full text-left py-2 px-4 border-[1px] border-slate-700 rounded-sm"
+      >
+        <div class="flex items-center gap-6">
+          <div>
+            <div>
+              {{ r.name }}
+            </div>
+
+            <div v-if="r.description" class="text-sm">
+              <hr class="my-2 border-white opacity-25" />
+              <span class="opacity-75">
+                {{ r.description }}
+              </span>
+            </div>
+          </div>
+
+          <menu class="flex gap-2">
+            <li v-if="r.birth">
+              <Button @click="handleJumpToDate(r.birth)" variant="outline" size="sm">
+                Naissance
+              </Button>
+            </li>
+            <li v-if="r.death">
+              <Button @click="handleJumpToDate(r.death)" variant="outline" size="sm">
+                Décès
+              </Button>
+            </li>
+          </menu>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>

src/components/calendar/state/Monthly.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { LeimDate } from '@/models/Date'
 import { useCalendar } from '@/stores/calendar'
+import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 import CalendarTile from '../CalendarTile.vue'
-import { useThrottleFn } from '@vueuse/core'
 
 const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
 

src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </TabsTrigger>
+</template>

src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsContent } from './TabsContent.vue'

src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, provide } from 'vue'
+import {
+  ToggleGroupRoot,
+  type ToggleGroupRootEmits,
+  type ToggleGroupRootProps,
+  useForwardPropsEmits
+} from 'radix-vue'
+import type { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="cn('flex items-center justify-center gap-1', props.class)"
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>

src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, computed, inject } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size
+        }),
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { type ToggleVariants, toggleVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: HTMLAttributes['class']
+      variant?: ToggleVariants['variant']
+      size?: ToggleVariants['size']
+    }
+  >(),
+  {
+    variant: 'default',
+    size: 'default',
+    disabled: false
+  }
+)
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
+    <slot />
+  </Toggle>
+</template>

src/components/ui/toggle/index.ts

@@ -0,0 +1,26 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>