Field

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"
import { fieldVariants, type FieldVariants } from "./variants"

const props = withDefaults(
  defineProps<{
    /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
    class?: HTMLAttributes["class"]
    orientation?: FieldVariants["orientation"]
  }>(),
  {
    orientation: "vertical",
  }
)
</script>

<template>
  <div
    role="group"
    data-slot="field"
    :data-orientation="props.orientation"
    :class="cn(fieldVariants({ orientation: props.orientation }), props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="field-content"
    :class="cn('cn-field-content group/field-content flex flex-1 flex-col leading-snug', props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <p
    data-slot="field-description"
    :class="
      cn(
        'cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance',
        'last:mt-0 nth-last-2:-mt-1',
        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
        props.class
      )
    "
  >
    <slot />
  </p>
</template>

<!--
  Оригинал считает содержимое через `useMemo`/`children`. Во Vue тот же выбор
  (children против errors) выражен через `useSlots()`: если передан слот
  по умолчанию, он побеждает точно так же, как `children` в React.
-->
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed, useSlots } from "vue"
import { cn } from "@/lib/utils"

type FieldErrorItem = { message?: string } | undefined

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
  errors?: FieldErrorItem[]
}>()

const slots = useSlots()

type ErrorContent =
  | { kind: "slot" }
  | { kind: "single"; message?: string }
  | { kind: "list"; errors: FieldErrorItem[] }
  | null

const content = computed<ErrorContent>(() => {
  if (slots.default) {
    return { kind: "slot" }
  }

  if (!props.errors?.length) {
    return null
  }

  const uniqueErrors = [...new Map(props.errors.map((error) => [error?.message, error])).values()]

  if (uniqueErrors.length === 1) {
    return { kind: "single", message: uniqueErrors[0]?.message }
  }

  return { kind: "list", errors: uniqueErrors }
})

const hasContent = computed(() => {
  if (!content.value) return false
  if (content.value.kind === "single") return !!content.value.message
  return true
})
</script>

<template>
  <div
    v-if="hasContent"
    role="alert"
    data-slot="field-error"
    :class="cn('cn-field-error font-normal', props.class)"
  >
    <slot v-if="content?.kind === 'slot'" />
    <ul v-else-if="content?.kind === 'list'" class="ml-4 flex list-disc flex-col gap-1">
      <template v-for="(error, index) in content.errors" :key="index">
        <li v-if="error?.message">{{ error.message }}</li>
      </template>
    </ul>
    <template v-else-if="content?.kind === 'single'">{{ content.message }}</template>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="field-group"
    :class="cn('cn-field-group group/field-group @container/field-group flex w-full flex-col', props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed } from "vue"
import type { LabelProps } from "reka-ui"
import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const props = defineProps<
  LabelProps & {
    /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
    class?: HTMLAttributes["class"]
  }
>()

const delegatedProps = computed(() => {
  const { class: _class, ...delegated } = props
  return delegated
})
</script>

<template>
  <Label
    data-slot="field-label"
    v-bind="delegatedProps"
    :class="
      cn(
        'cn-field-label group/field-label peer/field-label flex w-fit',
        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
        props.class
      )
    "
  >
    <slot />
  </Label>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{
    /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
    class?: HTMLAttributes["class"]
    variant?: "legend" | "label"
  }>(),
  {
    variant: "legend",
  }
)
</script>

<template>
  <legend
    data-slot="field-legend"
    :data-variant="props.variant"
    :class="cn('cn-field-legend', props.class)"
  >
    <slot />
  </legend>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed, useSlots } from "vue"
import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()

const slots = useSlots()
const hasContent = computed(() => !!slots.default)
</script>

<template>
  <div
    data-slot="field-separator"
    :data-content="hasContent"
    :class="cn('cn-field-separator relative', props.class)"
  >
    <Separator class="absolute inset-0 top-1/2" />
    <span
      v-if="hasContent"
      class="cn-field-separator-content relative mx-auto block w-fit bg-background"
      data-slot="field-separator-content"
    >
      <slot />
    </span>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <fieldset data-slot="field-set" :class="cn('cn-field-set flex flex-col', props.class)">
    <slot />
  </fieldset>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div data-slot="field-label" :class="cn('cn-field-title flex w-fit items-center', props.class)">
    <slot />
  </div>
</template>

export { default as Field } from "./Field.vue"
export { default as FieldLabel } from "./FieldLabel.vue"
export { default as FieldDescription } from "./FieldDescription.vue"
export { default as FieldError } from "./FieldError.vue"
export { default as FieldGroup } from "./FieldGroup.vue"
export { default as FieldLegend } from "./FieldLegend.vue"
export { default as FieldSeparator } from "./FieldSeparator.vue"
export { default as FieldSet } from "./FieldSet.vue"
export { default as FieldContent } from "./FieldContent.vue"
export { default as FieldTitle } from "./FieldTitle.vue"
export { fieldVariants, type FieldVariants } from "./variants"

import { cva, type VariantProps } from "class-variance-authority"

/**
 * Перенесено дословно из shadcn (registry/bases/radix/ui/field.tsx, MIT).
 *
 * cva-блоки — чистые JS-объекты и переносятся между React и Vue без единой
 * правки. Вся визуальная семантика живёт здесь, а фреймворк-специфичной
 * остаётся только разметка.
 */
export const fieldVariants = cva("cn-field group/field flex w-full", {
  variants: {
    orientation: {
      vertical:
        "cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto",
      horizontal:
        "cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
      responsive:
        "cn-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
    },
  },
  defaultVariants: {
    orientation: "vertical",
  },
})

export type FieldVariants = VariantProps<typeof fieldVariants>