[Feature]: Add ToggleGroup

[maelp]

Describe the feature

I'd like to use the radix-vue ToggleGroup but it isn't yet into shadcn (although "Toggle" is).

I tried looking at the radix-vue code but it seems that ToggleGroupItem already includes the radix-vue "Toggle" item, so I guess it wouldn't use the shadcn "Toggle" item, in this case does this mean we have to reimplement it completely?

Would you show me how to help reimplement it?

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[maelp]

(I'm not sure how complex the feature would be to implement? is it just re-using radix-vue? do we need to copy-paste the whole code and adapt? or is there another way?)

[zernonia]

Yeah we can add that. And I think we can adapt the current Toggle's style here as well

[maelp]

Nice, that's how I did it for now (I'm using the regular radix ToggleRoot and adapting the item that way)

<script setup lang="ts">
import { withDefaults, defineProps } from "vue";
import type { ToggleGroupItemProps } from "radix-vue";
import { ToggleGroupItem } from "radix-vue";
import type { VariantProps } from "class-variance-authority";
import { computed } from "vue";
import { toggleGroupItemVariants } from ".";
import { cn, useEmitAsProps } from "../frameworkUtils";
import { GIcon } from "@/ui";

type ToggleGroupItemVariantProps = VariantProps<typeof toggleGroupItemVariants>;

interface Props extends ToggleGroupItemProps {
  variant?: ToggleGroupItemVariantProps["variant"];
  size?: ToggleGroupItemVariantProps["size"];
  icon?: string;
  title?: string;
}
const props = withDefaults(defineProps<Props>(), {
  variant: "default",
  size: "default",
});

const toggleProps = computed(() => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { variant, size, ...otherProps } = props;
  return otherProps;
});
</script>

<template>
  <ToggleGroupItem
    v-bind="{ ...toggleProps }"
    :class="
      cn(toggleGroupItemVariants({ variant, size, class: $attrs.class ?? '' }))
    "
  >
    <GIcon
      :icon="props.icon"
      class="h-[15px] w-[15px] mr-1"
      v-if="props.icon"
    ></GIcon>
    <span class="text-sm" v-if="props.title">{{ props.title }}</span>
    <slot />
  </ToggleGroupItem>
</template>

and

import { cva } from "class-variance-authority";

export { ToggleGroupRoot } from "radix-vue";
export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";

export const toggleGroupItemVariants = cva(
  "inline-flex items-center justify-center 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 first:rounded-l-md last:rounded-r-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3",
        sm: "h-8 px-2",
        lg: "h-11 px-5",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

but there's probably a cleaner way to do it :)

[Tajcore]

Question how did you use this within a form

[sadeghbarati]

#275