index.ts 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import type { VariantProps } from "class-variance-authority"
  2. import type { HTMLAttributes } from "vue"
  3. import type { ButtonVariants } from '@/Packages/Shadcn/Components/ui/button'
  4. import { cva } from "class-variance-authority"
  5. export { default as InputGroup } from "./InputGroup.vue"
  6. export { default as InputGroupAddon } from "./InputGroupAddon.vue"
  7. export { default as InputGroupButton } from "./InputGroupButton.vue"
  8. export { default as InputGroupInput } from "./InputGroupInput.vue"
  9. export { default as InputGroupText } from "./InputGroupText.vue"
  10. export { default as InputGroupTextarea } from "./InputGroupTextarea.vue"
  11. export const inputGroupAddonVariants = cva(
  12. "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
  13. {
  14. variants: {
  15. align: {
  16. "inline-start":
  17. "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
  18. "inline-end":
  19. "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
  20. "block-start":
  21. "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
  22. "block-end":
  23. "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
  24. },
  25. },
  26. defaultVariants: {
  27. align: "inline-start",
  28. },
  29. },
  30. )
  31. export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
  32. export const inputGroupButtonVariants = cva(
  33. "text-sm shadow-none flex gap-2 items-center",
  34. {
  35. variants: {
  36. size: {
  37. "xs": "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
  38. "sm": "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
  39. "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
  40. "icon-sm": "size-8 p-0 has-[>svg]:p-0",
  41. },
  42. },
  43. defaultVariants: {
  44. size: "xs",
  45. },
  46. },
  47. )
  48. export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
  49. export interface InputGroupButtonProps {
  50. variant?: ButtonVariants["variant"]
  51. size?: InputGroupButtonVariants["size"]
  52. class?: HTMLAttributes["class"]
  53. }