Initial Commit

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import type { ToggleGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ToggleGroupItem, useForwardProps } from 'reka-ui'
+import { inject } from 'vue'
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants> & {
+  spacing?: number
+}
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    data-slot="toggle-group-item"
+    :data-variant="context?.variant || variant"
+    :data-size="context?.size || size"
+    :data-spacing="context?.spacing"
+    v-bind="forwardedProps"
+    :class="cn(
+      'data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+      toggleVariants({
+        variant: context?.variant || variant,
+        size: context?.size || size,
+      }),
+      props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>