Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,22 @@
+<script setup>
+import { cn } from "@/lib/utils";
+import { buttonGroupVariants } from ".";
+
+const props = defineProps({
+  class: { type: null, required: false },
+  orientation: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :class="
+      cn(buttonGroupVariants({ orientation: props.orientation }), props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,28 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+import { Separator } from '@/components/ui/separator';
+
+const props = defineProps({
+  orientation: { type: String, required: false, default: "vertical" },
+  decorative: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+});
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    data-slot="button-group-separator"
+    v-bind="delegatedProps"
+    :orientation="props.orientation"
+    :class="
+      cn(
+        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        props.class,
+      )
+    "
+  />
+</template>
@@ -0,0 +1,29 @@
+<script setup>
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+  orientation: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "div" },
+});
+</script>
+
+<template>
+  <Primitive
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>
@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+
+export { default as ButtonGroup } from "./ButtonGroup.vue";
+export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.vue";
+export { default as ButtonGroupText } from "./ButtonGroupText.vue";
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);